LocalStorage.html
3.76 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
<!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
*
* 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;
}
});</pre>
</body>
</html>