/*
This file is part of Ext JS 4.2
Copyright (c) 2011-2013 Sencha Inc
Contact: http://www.sencha.com/contact
GNU General Public License Usage
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.
If you are unsure which license is appropriate for your use, please contact the sales department
at http://www.sencha.com/contact.
Build date: 2013-05-16 14:36:50 (f9be68accb407158ba2b1be2c226a6ce1f649314)
*/
/**
* @author Ed Spencer
*
* 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:
*
* 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: "Search"
* });
*
* //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',
alias: 'proxy.localstorage',
alternateClassName: 'Ext.data.LocalStorageProxy',
//inherit docs
getStorageObject: function() {
return window.localStorage;
}
});
|
Download
