12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788 |
- <!DOCTYPE html>
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>The source code</title>
- <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
- <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
- <style type="text/css">
- .highlight { display: block; background-color: #ddd; }
- </style>
- <script type="text/javascript">
- function highlight() {
- document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
- }
- </script>
- </head>
- <body onload="prettyPrint(); highlight();">
- <pre class="prettyprint lang-js"><span id='Ext-data-proxy-LocalStorage'>/**
- </span> * @author Ed Spencer
- *
- * The LocalStorageProxy uses the new HTML5 localStorage API to save {@link Ext.data.Model Model} data locally on the
- * client browser. HTML5 localStorage is a key-value store (e.g. cannot save complex objects like JSON), so
- * LocalStorageProxy automatically serializes and deserializes data when saving and retrieving it.
- *
- * localStorage is extremely useful for saving user-specific information without needing to build server-side
- * infrastructure to support it. Let's imagine we're writing a Twitter search application and want to save the user's
- * searches locally so they can easily perform a saved search again later. We'd start by creating a Search model:
- *
- * Ext.define('Search', {
- * fields: ['id', 'query'],
- * extend: 'Ext.data.Model',
- * proxy: {
- * type: 'localstorage',
- * id : 'twitter-Searches'
- * }
- * });
- *
- * Our Search model contains just two fields - id and query - plus a Proxy definition. The only configuration we need to
- * pass to the LocalStorage proxy is an {@link #id}. This is important as it separates the Model data in this Proxy from
- * all others. The localStorage API puts all data into a single shared namespace, so by setting an id we enable
- * LocalStorageProxy to manage the saved Search data.
- *
- * Saving our data into localStorage is easy and would usually be done with a {@link Ext.data.Store Store}:
- *
- * //our Store automatically picks up the LocalStorageProxy defined on the Search model
- * var store = Ext.create('Ext.data.Store', {
- * model: "Search"
- * });
- *
- * //loads any existing Search data from localStorage
- * store.load();
- *
- * //now add some Searches
- * store.add({query: 'Sencha Touch'});
- * store.add({query: 'Ext JS'});
- *
- * //finally, save our Search data to localStorage
- * store.sync();
- *
- * The LocalStorageProxy automatically gives our new Searches an id when we call store.sync(). It encodes the Model data
- * and places it into localStorage. We can also save directly to localStorage, bypassing the Store altogether:
- *
- * var search = Ext.create('Search', {query: 'Sencha Animator'});
- *
- * //uses the configured LocalStorageProxy to save the new Search to localStorage
- * search.save();
- *
- * # Limitations
- *
- * If this proxy is used in a browser where local storage is not supported, the constructor will throw an error. A local
- * storage proxy requires a unique ID which is used as a key in which all record data are stored in the local storage
- * object.
- *
- * It's important to supply this unique ID as it cannot be reliably determined otherwise. If no id is provided but the
- * attached store has a storeId, the storeId will be used. If neither option is presented the proxy will throw an error.
- */
- Ext.define('Ext.data.proxy.LocalStorage', {
- extend: 'Ext.data.proxy.WebStorage',
- alias: 'proxy.localstorage',
- alternateClassName: 'Ext.data.LocalStorageProxy',
-
- //inherit docs
- getStorageObject: function() {
- return window.localStorage;
- }
- });</pre>
- </body>
- </html>
|