src/data/proxy/LocalStorage.js

   1 /**
   2  * @author Ed Spencer
   3  * @class Ext.data.proxy.LocalStorage
   4  * @extends Ext.data.proxy.WebStorage
   5  *
   6  * <p>The LocalStorageProxy uses the new HTML5 localStorage API to save {@link Ext.data.Model Model} data locally on
   7  * the client browser. HTML5 localStorage is a key-value store (e.g. cannot save complex objects like JSON), so
   8  * LocalStorageProxy automatically serializes and deserializes data when saving and retrieving it.</p>
   9  *
  10  * <p>localStorage is extremely useful for saving user-specific information without needing to build server-side
  11  * infrastructure to support it. Let's imagine we're writing a Twitter search application and want to save the user's
  12  * searches locally so they can easily perform a saved search again later. We'd start by creating a Search model:</p>
  13  *
  14 <pre><code>
  15 Ext.define('Search', {
  16     fields: ['id', 'query'],
  17     extend: 'Ext.data.Model',
  18     proxy: {
  19         type: 'localstorage',
  20         id  : 'twitter-Searches'
  21     }
  22 });
  23 </code></pre>
  24  *
  25  * <p>Our Search model contains just two fields - id and query - plus a Proxy definition. The only configuration we
  26  * need to pass to the LocalStorage proxy is an {@link #id}. This is important as it separates the Model data in this
  27  * Proxy from all others. The localStorage API puts all data into a single shared namespace, so by setting an id we
  28  * enable LocalStorageProxy to manage the saved Search data.</p>
  29  *
  30  * <p>Saving our data into localStorage is easy and would usually be done with a {@link Ext.data.Store Store}:</p>
  31  *
  32 <pre><code>
  33 //our Store automatically picks up the LocalStorageProxy defined on the Search model
  34 var store = new Ext.data.Store({
  35     model: "Search"
  36 });
  37
  38 //loads any existing Search data from localStorage
  39 store.load();
  40
  41 //now add some Searches
  42 store.add({query: 'Sencha Touch'});
  43 store.add({query: 'Ext JS'});
  44
  45 //finally, save our Search data to localStorage
  46 store.sync();
  47 </code></pre>
  48  *
  49  * <p>The LocalStorageProxy automatically gives our new Searches an id when we call store.sync(). It encodes the Model
  50  * data and places it into localStorage. We can also save directly to localStorage, bypassing the Store altogether:</p>
  51  *
  52 <pre><code>
  53 var search = Ext.ModelManager.create({query: 'Sencha Animator'}, 'Search');
  54
  55 //uses the configured LocalStorageProxy to save the new Search to localStorage
  56 search.save();
  57 </code></pre>
  58  *
  59  * <p><u>Limitations</u></p>
  60  *
  61  * <p>If this proxy is used in a browser where local storage is not supported, the constructor will throw an error.
  62  * A local storage proxy requires a unique ID which is used as a key in which all record data are stored in the
  63  * local storage object.</p>
  64  *
  65  * <p>It's important to supply this unique ID as it cannot be reliably determined otherwise. If no id is provided
  66  * but the attached store has a storeId, the storeId will be used. If neither option is presented the proxy will
  67  * throw an error.</p>
  68  */
  69 Ext.define('Ext.data.proxy.LocalStorage', {
  70     extend: 'Ext.data.proxy.WebStorage',
  71     alias: 'proxy.localstorage',
  72     alternateClassName: 'Ext.data.LocalStorageProxy',
  73
  74     //inherit docs
  75     getStorageObject: function() {
  76         return window.localStorage;
  77     }
  78 });