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