Upgrade to ExtJS 4.0.7 - Released 10/19/2011
[extjs.git] / docs / source / LocalStorage.html
index dff0ada..50448d6 100644 (file)
@@ -1,70 +1,78 @@
-<!DOCTYPE html><html><head><title>Sencha Documentation Project</title><link rel="stylesheet" href="../reset.css" type="text/css"><link rel="stylesheet" href="../prettify.css" type="text/css"><link rel="stylesheet" href="../prettify_sa.css" type="text/css"><script type="text/javascript" src="../prettify.js"></script></head><body onload="prettyPrint()"><pre class="prettyprint"><pre><span id='Ext-data.proxy.LocalStorage'>/**
+<!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
- * @class Ext.data.proxy.LocalStorage
- * @extends Ext.data.proxy.WebStorage
- * 
- * &lt;p&gt;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.&lt;/p&gt;
- * 
- * &lt;p&gt;localStorage is extremely useful for saving user-specific information without needing to build server-side 
+ *
+ * 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:&lt;/p&gt;
- * 
-&lt;pre&gt;&lt;code&gt;
-Ext.define('Search', {
-    fields: ['id', 'query'],
-    extend: 'Ext.data.Model',
-    proxy: {
-        type: 'localstorage',
-        id  : 'twitter-Searches'
-    }
-});
-&lt;/code&gt;&lt;/pre&gt;
- * 
- * &lt;p&gt;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.&lt;/p&gt;
- * 
- * &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;
- * 
-&lt;pre&gt;&lt;code&gt;
-//our Store automatically picks up the LocalStorageProxy defined on the Search model
-var store = new Ext.data.Store({
-    model: &quot;Search&quot;
-});
-
-//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();
-&lt;/code&gt;&lt;/pre&gt;
- * 
- * &lt;p&gt;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:&lt;/p&gt;
- * 
-&lt;pre&gt;&lt;code&gt;
-var search = Ext.ModelManager.create({query: 'Sencha Animator'}, 'Search');
-
-//uses the configured LocalStorageProxy to save the new Search to localStorage
-search.save();
-&lt;/code&gt;&lt;/pre&gt;
- * 
- * &lt;p&gt;&lt;u&gt;Limitations&lt;/u&gt;&lt;/p&gt;
- * 
- * &lt;p&gt;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.&lt;/p&gt;
- * 
- * &lt;p&gt;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.&lt;/p&gt;
+ * 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: &quot;Search&quot;
+ *     });
+ *
+ *     //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',
@@ -75,4 +83,6 @@ Ext.define('Ext.data.proxy.LocalStorage', {
     getStorageObject: function() {
         return window.localStorage;
     }
-});</pre></pre></body></html>
\ No newline at end of file
+});</pre>
+</body>
+</html>