Upgrade to ExtJS 4.0.0 - Released 04/26/2011

[extjs.git] / docs / source / LocalStorage.html
diff --git a/docs/source/LocalStorage.html b/docs/source/LocalStorage.html

new file mode 100644 (file)

index 0000000..dff0ada
--- /dev/null
+++ b/docs/source/LocalStorage.html
@@ -0,0 +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'>/**
+</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 
+ * 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;
+ */
+Ext.define('Ext.data.proxy.LocalStorage', {
+    extend: 'Ext.data.proxy.WebStorage',
+    alias: 'proxy.localstorage',
+    alternateClassName: 'Ext.data.LocalStorageProxy',
+    
+    //inherit docs
+    getStorageObject: function() {
+        return window.localStorage;
+    }
+});</pre></pre></body></html>
+\ No newline at end of file