src/data/proxy/LocalStorage.js

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