docs/source/LocalStorage.html

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