/*
|
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;
|
}
|
});
|
