HTML5本地存儲Localstorage

時間  2019-11-08
標籤 html5 html 本地 存儲 localstorage 欄目 HTML5 简体版
原文   原文鏈接

什麼是localstorage

　　前幾天在老項目中發現有對cookie的操做以爲很奇怪，諮詢下來是要緩存一些信息，以免在URL上面傳遞參數，但沒有考慮過cookie會帶來什麼問題：javascript

　　① cookie大小限制在4k左右，不適合存業務數據
　　② cookie每次隨HTTP事務一塊兒發送，浪費帶寬

　　咱們是作移動項目的，因此這裏真實適合使用的技術是localstorage，localstorage能夠說是對cookie的優化，使用它能夠方便在客戶端存儲數據，而且不會隨着HTTP傳輸，但也不是沒有問題：php

　　① localstorage大小限制在500萬字符左右，各個瀏覽器不一致
　　② localstorage在隱私模式下不可讀取
　　③ localstorage本質是在讀寫文件，數據多的話會比較卡（firefox會一次性將數據導入內存，想一想就以爲嚇人啊）
　　④ localstorage不能被爬蟲爬取，不要用它徹底取代URL傳參

　　瑕不掩瑜，以上問題皆可避免，因此咱們的關注點應該放在如何使用localstorage上，而且是如何正確使用。html

　localstorage的使用

　　基礎知識

　　localstorage存儲對象分爲兩種：java

　　① sessionStrage： session即會話的意思，在這裏的session是指用戶瀏覽某個網站時，從進入網站到關閉網站這個時間段，session對象的有效期就只有這麼長。android

　　② localStorage： 將數據保存在客戶端硬件設備上，無論它是什麼，意思就是下次打開計算機時候數據還在。git

　　二者區別就是一個做爲臨時保存，一個長期保存。web

　　這裏來一段簡單的代碼說明其基本使用：json

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
< div id = "msg" <span id = "15_nwp" style = "width: auto; height: auto; float: none;" >< a id = "15_nwl" href = "http://cpro.baidu.com/cpro/ui/uijs.php?app_id=0&c=news&cf=1001&ch=0&di=128&fv=17&is_app=0&jk=69eb6b88bc58f1e3&k=style&k0=style&kdi0=0&luki=3&n=10&p=baidu&q=06011078_cpr&rb=0&rs=1&seller_id=1&sid=e3f158bc886beb69&ssp2=1&stid=0&t=tpclicked3_hc&tu=u1922429&u=http%3A%2F%2Fwww%2Eadmin10000%2Ecom%2Fdocument%2F6283%2Ehtml&urlid=0" target = "_blank" mpid = "15" style = "text-decoration: none;" >< span style = "color:#0000ff;font-size:14px;width:auto;height:auto;float:none;" >style</ span ></ a ></ span >="margin: 10px 0; border: 1px solid black; padding: 10px; width: 300px;
   height: 100px;">
</ div >
< input type = "text" id = "text" />
< select id = "type" >
   < option value = "session" >sessionStorage</ option >
   < option value = "local" >localStorage</ option >
</ select >
< button onclick = "save();" >
   保存數據</ button >
< button onclick = "load();" >
   讀取數據</ button >
< script type = "text/<span id=" 16_nwp" style = "width: auto; height: auto; float: none;" >< a id = "16_nwl" href = "http://cpro.baidu.com/cpro/ui/uijs.php?app_id=0&c=news&cf=1001&ch=0&di=128&fv=17&is_app=0&jk=69eb6b88bc58f1e3&k=javascript&k0=javascript&kdi0=0&luki=8&n=10&p=baidu&q=06011078_cpr&rb=0&rs=1&seller_id=1&sid=e3f158bc886beb69&ssp2=1&stid=0&t=tpclicked3_hc&tu=u1922429&u=http%3A%2F%2Fwww%2Eadmin10000%2Ecom%2Fdocument%2F6283%2Ehtml&urlid=0" target = "_blank" mpid = "16" style = "text-decoration: none;" >< span style = "color:#0000ff;font-size:14px;width:auto;height:auto;float:none;" >javascript</ span ></ a ></ span >">
   var msg = document.getElementById('msg'),
             text = document.getElementById('text'),
             type = document.getElementById('type');
 
   function save() {
     var str = text.value;
     var t = type.value;
     if (t == 'session') {
       sessionStorage.setItem('msg', str);
     } else {
       localStorage.setItem('msg', str);
     }
   }
 
   function load() {
     var t = type.value;
     if (t == 'session') {
       msg.innerHTML = sessionStorage.getItem('msg');
     } else {
       msg.innerHTML = localStorage.getItem('msg');
     }
   }
</ script >

　真實場景

　　實際工做中對localstorage的使用通常有如下需求：數組

　　① 緩存通常信息，如搜索頁的出發城市，達到城市，非實時定位信息瀏覽器

　　② 緩存城市列表數據，這個數據每每比較大

　　③ 每條緩存信息須要可追蹤，好比服務器通知城市數據更新，這個時候在最近一次訪問的時候要自動設置過時

　　④ 每條信息具備過時日期狀態，在過時外時間須要由服務器拉取數據

　　⑤ ......

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
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
define([], function () {
 
   var Storage = _.inherit({
     //默認屬性
     propertys: function () {
 
       //<span id="4_nwp" style="width: auto; height: auto; float: none;"><a id="4_nwl" href="http://cpro.baidu.com/cpro/ui/uijs.php?app_id=0&c=news&cf=1001&ch=0&di=128&fv=17&is_app=0&jk=69eb6b88bc58f1e3&k=%B4%FA%C0%ED&k0=%B4%FA%C0%ED&kdi0=0&luki=1&n=10&p=baidu&q=06011078_cpr&rb=0&rs=1&seller_id=1&sid=e3f158bc886beb69&ssp2=1&stid=0&t=tpclicked3_hc&tu=u1922429&u=http%3A%2F%2Fwww%2Eadmin10000%2Ecom%2Fdocument%2F6283%2Ehtml&urlid=0" target="_blank" mpid="4" style="text-decoration: none;"><span style="color:#0000ff;font-size:14px;width:auto;height:auto;float:none;">代理</span></a></span>對象，默認爲localstorage
       this .sProxy = window.localStorage;
 
       //60 * 60 * 24 * 30 * 1000 ms ==30天
       this .defaultLifeTime = 2592000000;
 
       //本地<span id="5_nwp" style="width: auto; height: auto; float: none;"><a id="5_nwl" href="http://cpro.baidu.com/cpro/ui/uijs.php?app_id=0&c=news&cf=1001&ch=0&di=128&fv=17&is_app=0&jk=69eb6b88bc58f1e3&k=%BB%BA%B4%E6&k0=%BB%BA%B4%E6&kdi0=0&luki=4&n=10&p=baidu&q=06011078_cpr&rb=0&rs=1&seller_id=1&sid=e3f158bc886beb69&ssp2=1&stid=0&t=tpclicked3_hc&tu=u1922429&u=http%3A%2F%2Fwww%2Eadmin10000%2Ecom%2Fdocument%2F6283%2Ehtml&urlid=0" target="_blank" mpid="5" style="text-decoration: none;"><span style="color:#0000ff;font-size:14px;width:auto;height:auto;float:none;">緩存</span></a></span>用以存放全部localstorage鍵值與過時日期的映射
       this .keyCache = 'SYSTEM_KEY_TIMEOUT_MAP' ;
 
       //當緩存容量已滿，每次刪除的緩存數
       this .removeNum = 5;
 
     },
 
     assert: function () {
       if ( this .sProxy === null ) {
         throw 'not override sProxy property' ;
       }
     },
 
     initialize: function (opts) {
       this .propertys();
       this .assert();
     },
 
     /*
     新增localstorage
     數據格式包括惟一鍵值，json字符串，過時日期，存入日期
     sign 爲格式化後的請求參數，用於同一請求不一樣參數時候返回新數據，好比列表爲北京的城市，後切換爲上海，會判斷tag不一樣而更新<span id="6_nwp" style="width: auto; height: auto; float: none;"><a id="6_nwl" href="http://cpro.baidu.com/cpro/ui/uijs.php?app_id=0&c=news&cf=1001&ch=0&di=128&fv=17&is_app=0&jk=69eb6b88bc58f1e3&k=%BB%BA%B4%E6&k0=%BB%BA%B4%E6&kdi0=0&luki=4&n=10&p=baidu&q=06011078_cpr&rb=0&rs=1&seller_id=1&sid=e3f158bc886beb69&ssp2=1&stid=0&t=tpclicked3_hc&tu=u1922429&u=http%3A%2F%2Fwww%2Eadmin10000%2Ecom%2Fdocument%2F6283%2Ehtml&urlid=0" target="_blank" mpid="6" style="text-decoration: none;"><span style="color:#0000ff;font-size:14px;width:auto;height:auto;float:none;">緩存</span></a></span>數據，tag至關於簽名
     每一鍵值只會緩存一條信息
     */
     set: function (key, value, timeout, sign) {
       var _d = new Date();
       //存入日期
       var indate = _d.getTime();
 
       //最終保存的數據
       var entity = null ;
 
       if (!timeout) {
         _d.setTime(_d.getTime() + this .defaultLifeTime);
         timeout = _d.getTime();
       }
 
       //
       this .setKeyCache(key, timeout);
       entity = this .buildStorageObj(value, indate, timeout, sign);
 
       try {
         this .sProxy.setItem(key, JSON.stringify(entity));
         return true ;
       } catch (e) {
         //localstorage寫滿時,全清掉
         if (e.name == 'QuotaExceededError' ) {
           //            this.sProxy.clear();
           //localstorage寫滿時，選擇離過時時間最近的數據刪除，這樣也會有些影響，可是感受比全清除好些，若是<span id="7_nwp" style="width: auto; height: auto; float: none;"><a id="7_nwl" href="http://cpro.baidu.com/cpro/ui/uijs.php?app_id=0&c=news&cf=1001&ch=0&di=128&fv=17&is_app=0&jk=69eb6b88bc58f1e3&k=%BB%BA%B4%E6&k0=%BB%BA%B4%E6&kdi0=0&luki=4&n=10&p=baidu&q=06011078_cpr&rb=0&rs=1&seller_id=1&sid=e3f158bc886beb69&ssp2=1&stid=0&t=tpclicked3_hc&tu=u1922429&u=http%3A%2F%2Fwww%2Eadmin10000%2Ecom%2Fdocument%2F6283%2Ehtml&urlid=0" target="_blank" mpid="7" style="text-decoration: none;"><span style="color:#0000ff;font-size:14px;width:auto;height:auto;float:none;">緩存</span></a></span>過多，此過程比較耗時，100ms之內
           if (! this .removeLastCache()) throw '本次<span id="8_nwp" style="width: auto; height: auto; float: none;"><a id="8_nwl" href="http://cpro.baidu.com/cpro/ui/uijs.php?app_id=0&c=news&cf=1001&ch=0&di=128&fv=17&is_app=0&jk=69eb6b88bc58f1e3&k=%CA%FD%BE%DD%B4%E6%B4%A2&k0=%CA%FD%BE%DD%B4%E6%B4%A2&kdi0=0&luki=2&n=10&p=baidu&q=06011078_cpr&rb=0&rs=1&seller_id=1&sid=e3f158bc886beb69&ssp2=1&stid=0&t=tpclicked3_hc&tu=u1922429&u=http%3A%2F%2Fwww%2Eadmin10000%2Ecom%2Fdocument%2F6283%2Ehtml&urlid=0" target="_blank" mpid="8" style="text-decoration: none;"><span style="color:#0000ff;font-size:14px;width:auto;height:auto;float:none;">數據存儲</span></a></span>量過大' ;
           this .set(key, value, timeout, sign);
         }
         console && console.log(e);
       }
       return false ;
     },
 
     //刪除過時緩存
     removeOverdueCache: function () {
       var tmpObj = null , i, len;
 
       var now = new Date().getTime();
       //取出鍵值對
       var cacheStr = this .sProxy.getItem( this .keyCache);
       var cacheMap = [];
       var newMap = [];
       if (!cacheStr) {
         return ;
       }
 
       cacheMap = JSON.parse(cacheStr);
 
       for (i = 0, len = cacheMap.length; i < len; i++) {
         tmpObj = cacheMap[i];
         if (tmpObj.timeout < now) {
           this .sProxy.removeItem(tmpObj.key);
         } else {
           newMap.push(tmpObj);
         }
       }
       this .sProxy.setItem( this .keyCache, JSON.stringify(newMap));
 
     },
 
     removeLastCache: function () {
       var i, len;
       var num = this .removeNum || 5;
 
       //取出鍵值對
       var cacheStr = this .sProxy.getItem( this .keyCache);
       var cacheMap = [];
       var delMap = [];
 
       //說明本次存儲過大
       if (!cacheStr) return false ;
 
       cacheMap.sort( function (a, b) {
         return a.timeout - b.timeout;
       });
 
       //刪除了哪些數據
       delMap = cacheMap.splice(0, num);
       for (i = 0, len = delMap.length; i < len; i++) {
         this .sProxy.removeItem(delMap[i].key);
       }
 
       this .sProxy.setItem( this .keyCache, JSON.stringify(cacheMap));
       return true ;
     },
 
     setKeyCache: function (key, timeout) {
       if (!key || !timeout || timeout < new Date().getTime()) return ;
       var i, len, tmpObj;
 
       //獲取當前已經<span id="9_nwp" style="width: auto; height: auto; float: none;"><a id="9_nwl" href="http://cpro.baidu.com/cpro/ui/uijs.php?app_id=0&c=news&cf=1001&ch=0&di=128&fv=17&is_app=0&jk=69eb6b88bc58f1e3&k=%BB%BA%B4%E6&k0=%BB%BA%B4%E6&kdi0=0&luki=4&n=10&p=baidu&q=06011078_cpr&rb=0&rs=1&seller_id=1&sid=e3f158bc886beb69&ssp2=1&stid=0&t=tpclicked3_hc&tu=u1922429&u=http%3A%2F%2Fwww%2Eadmin10000%2Ecom%2Fdocument%2F6283%2Ehtml&urlid=0" target="_blank" mpid="9" style="text-decoration: none;"><span style="color:#0000ff;font-size:14px;width:auto;height:auto;float:none;">緩存</span></a></span>的鍵值字符串
       var oldstr = this .sProxy.getItem( this .keyCache);
       var oldMap = [];
       //當前key是否已經存在
       var <span id= "10_nwp" style= "width: auto; height: auto; float: none;" ><a id= "10_nwl" href= "http://cpro.baidu.com/cpro/ui/uijs.php?app_id=0&c=news&cf=1001&ch=0&di=128&fv=17&is_app=0&jk=69eb6b88bc58f1e3&k=flag&k0=flag&kdi0=0&luki=9&n=10&p=baidu&q=06011078_cpr&rb=0&rs=1&seller_id=1&sid=e3f158bc886beb69&ssp2=1&stid=0&t=tpclicked3_hc&tu=u1922429&u=http%3A%2F%2Fwww%2Eadmin10000%2Ecom%2Fdocument%2F6283%2Ehtml&urlid=0" target= "_blank" mpid= "10" style= "text-decoration: none;" ><span style= "color:#0000ff;font-size:14px;width:auto;height:auto;float:none;" >flag</span></a></span> = false ;
       var obj = {};
       obj.key = key;
       obj.timeout = timeout;
 
       if (oldstr) {
         oldMap = JSON.parse(oldstr);
         if (!_.isArray(oldMap)) oldMap = [];
       }
 
       for (i = 0, len = oldMap.length; i < len; i++) {
         tmpObj = oldMap[i];
         if (tmpObj.key == key) {
           oldMap[i] = obj;
           flag = true ;
           break ;
         }
       }
       if (!<span id= "11_nwp" style= "width: auto; height: auto; float: none;" ><a id= "11_nwl" href= "http://cpro.baidu.com/cpro/ui/uijs.php?app_id=0&c=news&cf=1001&ch=0&di=128&fv=17&is_app=0&jk=69eb6b88bc58f1e3&k=flag&k0=flag&kdi0=0&luki=9&n=10&p=baidu&q=06011078_cpr&rb=0&rs=1&seller_id=1&sid=e3f158bc886beb69&ssp2=1&stid=0&t=tpclicked3_hc&tu=u1922429&u=http%3A%2F%2Fwww%2Eadmin10000%2Ecom%2Fdocument%2F6283%2Ehtml&urlid=0" target= "_blank" mpid= "11" style= "text-decoration: none;" ><span style= "color:#0000ff;font-size:14px;width:auto;height:auto;float:none;" >flag</span></a></span>) oldMap.push(obj);
       //最後將新數組放到<span id="12_nwp" style="width: auto; height: auto; float: none;"><a id="12_nwl" href="http://cpro.baidu.com/cpro/ui/uijs.php?app_id=0&c=news&cf=1001&ch=0&di=128&fv=17&is_app=0&jk=69eb6b88bc58f1e3&k=%BB%BA%B4%E6&k0=%BB%BA%B4%E6&kdi0=0&luki=4&n=10&p=baidu&q=06011078_cpr&rb=0&rs=1&seller_id=1&sid=e3f158bc886beb69&ssp2=1&stid=0&t=tpclicked3_hc&tu=u1922429&u=http%3A%2F%2Fwww%2Eadmin10000%2Ecom%2Fdocument%2F6283%2Ehtml&urlid=0" target="_blank" mpid="12" style="text-decoration: none;"><span style="color:#0000ff;font-size:14px;width:auto;height:auto;float:none;">緩存</span></a></span>中
       this .sProxy.setItem( this .keyCache, JSON.stringify(oldMap));
 
     },
 
     buildStorageObj: function (value, indate, timeout, sign) {
       var obj = {
         value: value,
         timeout: timeout,
         sign: sign,
         indate: indate
       };
       return obj;
     },
 
     get: function (key, sign) {
       var result, now = new Date().getTime();
       try {
         result = this .sProxy.getItem(key);
         if (!result) return null ;
         result = JSON.parse(result);
 
         //數據過時
         if (result.timeout < now) return null ;
 
         //須要驗證簽名
         if (sign) {
           if (sign === result.sign)
             return result.value;
           return null ;
         } else {
           return result.value;
         }
 
       } catch (e) {
         console && console.log(e);
       }
       return null ;
     },
 
     //獲取簽名
     getSign: function (key) {
       var result, sign = null ;
       try {
         result = this .sProxy.getItem(key);
         if (result) {
           result = JSON.parse(result);
           sign = result && result.sign
         }
       } catch (e) {
         console && console.log(e);
       }
       return sign;
     },
 
     remove: function (key) {
       return this .sProxy.removeItem(key);
     },
 
     clear: function () {
       this .sProxy.clear();
     }
   });
 
   Storage.getInstance = function () {
     if ( this .instance) {
       return this .instance;
     } else {
       return this .instance = new this ();
     }
   };
 
   return Storage;
 
});

　　這段代碼包含了localstorage的基本操做，而且對以上問題作了處理，而真實的使用還要再抽象：

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
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
define([ 'AbstractStorage' ], function (AbstractStorage) {
 
   var Store = _.inherit({
     //默認屬性
     propertys: function () {
 
       //每一個對象必定要具備存儲鍵，而且不能重複
       this .key = null ;
 
       //默認一條數據的生命週期，S爲秒，M爲分，D爲天
       this .lifeTime = '30M' ;
 
       //默認返回數據
       //      this.defaultData = null;
 
       //<span id="2_nwp" style="width: auto; height: auto; float: none;"><a id="2_nwl" href="http://cpro.baidu.com/cpro/ui/uijs.php?app_id=0&c=news&cf=1001&ch=0&di=128&fv=17&is_app=0&jk=69eb6b88bc58f1e3&k=%B4%FA%C0%ED&k0=%B4%FA%C0%ED&kdi0=0&luki=1&n=10&p=baidu&q=06011078_cpr&rb=0&rs=1&seller_id=1&sid=e3f158bc886beb69&ssp2=1&stid=0&t=tpclicked3_hc&tu=u1922429&u=http%3A%2F%2Fwww%2Eadmin10000%2Ecom%2Fdocument%2F6283%2Ehtml&urlid=0" target="_blank" mpid="2" style="text-decoration: none;"><span style="color:#0000ff;font-size:14px;width:auto;height:auto;float:none;">代理</span></a></span>對象，localstorage對象
       this .sProxy = new AbstractStorage();
 
     },
 
     setOption: function (options) {
       _.extend( this , options);
     },
 
     assert: function () {
       if ( this .key === null ) {
         throw 'not override key property' ;
       }
       if ( this .sProxy === null ) {
         throw 'not override sProxy property' ;
       }
     },
 
     initialize: function (opts) {
       this .propertys();
       this .setOption(opts);
       this .assert();
     },
 
     _getLifeTime: function () {
       var timeout = 0;
       var str = this .lifeTime;
       var unit = str.charAt(str.length - 1);
       var num = str.substring(0, str.length - 1);
       var Map = {
         D: 86400,
         H: 3600,
         M: 60,
         S: 1
       };
       if ( typeof unit == 'string' ) {
         unit = unit.toUpperCase();
       }
       timeout = num;
       if (unit) timeout = Map[unit];
 
       //單位爲毫秒
       return num * timeout * 1000 ;
     },
 
     //<span id="3_nwp" style="width: auto; height: auto; float: none;"><a id="3_nwl" href="http://cpro.baidu.com/cpro/ui/uijs.php?app_id=0&c=news&cf=1001&ch=0&di=128&fv=17&is_app=0&jk=69eb6b88bc58f1e3&k=%BB%BA%B4%E6&k0=%BB%BA%B4%E6&kdi0=0&luki=4&n=10&p=baidu&q=06011078_cpr&rb=0&rs=1&seller_id=1&sid=e3f158bc886beb69&ssp2=1&stid=0&t=tpclicked3_hc&tu=u1922429&u=http%3A%2F%2Fwww%2Eadmin10000%2Ecom%2Fdocument%2F6283%2Ehtml&urlid=0" target="_blank" mpid="3" style="text-decoration: none;"><span style="color:#0000ff;font-size:14px;width:auto;height:auto;float:none;">緩存</span></a></span>數據
     set: function (value, sign) {
       //獲取過時時間
       var timeout = new Date();
       timeout.setTime(timeout.getTime() + this ._getLifeTime());
       this .sProxy.set( this .key, value, timeout.getTime(), sign);
     },
 
     //設置單個屬性
     setAttr: function (name, value, sign) {
       var key, obj;
       if (_.isObject(name)) {
         for (key in name) {
           if (name.hasOwnProperty(key)) this .setAttr(k, name[k], value);
         }
         return ;
       }
 
       if (!sign) sign = this .getSign();
 
       //獲取當前對象
       obj = this .get(sign) || {};
       if (!obj) return ;
       obj[name] = value;
       this .set(obj, sign);
 
     },
 
     getSign: function () {
       return this .sProxy.getSign( this .key);
     },
 
     remove: function () {
       this .sProxy.remove( this .key);
     },
 
     removeAttr: function (attrName) {
       var obj = this .get() || {};
       if (obj[attrName]) {
         delete obj[attrName];
       }
       this .set(obj);
     },
 
     get: function (sign) {
       var result = [], isEmpty = true , a;
       var obj = this .sProxy.get( this .key, sign);
       var type = typeof obj;
       var o = { 'string' : true , 'number' : true , 'boolean' : true };
       if (o[type]) return obj;
 
       if (_.isArray(obj)) {
         for ( var i = 0, len = obj.length; i < len; i++) {
           result[i] = obj[i];
         }
       } else if (_.isObject(obj)) {
         result = obj;
       }
 
       for (a in result) {
         isEmpty = false ;
         break ;
       }
       return !isEmpty ? result : null ;
     },
 
     getAttr: function (attrName, tag) {
       var obj = this .get(tag);
       var attrVal = null ;
       if (obj) {
         attrVal = obj[attrName];
       }
       return attrVal;
     }
 
   });
 
   Store.getInstance = function () {
     if ( this .instance) {
       return this .instance;
     } else {
       return this .instance = new this ();
     }
   };
 
   return Store;
});

　　咱們真實使用的時候是使用store這個類操做localstorage，代碼結束簡單測試：

　　存儲完成，之後都不會走請求，因而今天的代碼基本結束 ，最後在android Hybrid中有一後退按鈕，此按鈕一旦按下會回到上一個頁面，這個時候裏面的localstorage可能會讀取失效！一個簡單不靠譜的解決方案是在webapp中加入：

1
window.onunload = function () { }; //適合單頁應用，不要問我爲何，我也不知道

　結語

　　localstorage是移動開發必不可少的技術點，須要深刻了解，具體業務代碼後續會放到git上，有興趣的朋友能夠去了解

轉自：http://www.admin10000.com/document/6283.html

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程