HTML5 での Localstorage の使用に関するチュートリアル_html5 チュートリアル スキル

ローカルストレージとは

数日前、古いプロジェクトで Cookie の動作が非常に奇妙なことに気づきました。相談した結果、URL にパラメータを渡さないように情報をキャッシュしたいと思いましたが、Cookie が引き起こす問題については考慮していませんでした。原因:

① Cookie のサイズは約 4k に制限されており、ビジネスデータの保存には適していません
② Cookie は毎回 HTTP トランザクションと一緒に送信されるため、帯域幅が無駄に消費されます

私たちはモバイルプロジェクトを行っているため、ここで使用するのに本当に適したテクノロジーはローカルストレージです。ローカルストレージは、クライアント上にデータを保存するために使用でき、データは送信されません。 HTTP ですが、問題ありません:

① localstorage のサイズは約 500 万文字に制限されており、異なるブラウザでは一貫性がありません
② Localstorage はプライバシー モードでは読み取れません
③ localstorage の本質は、ファイルがあれば読み書きすることです。データが大量にあるとスタックしてしまいます (Firefox は一度にデータをメモリにインポートすることを考えると恐ろしいです)
④ localstorage はクローラーによってクロールされません。URL パラメーターの受け渡しを完全に置き換える目的で使用しないでください

欠点は利点を隠すものではありません。上記の問題は回避できるため、ローカルストレージの使用方法とそれを正しく使用する方法に重点を置く必要があります。
localstorageの使い方
基礎知識

localstorage ストレージ オブジェクトには 2 つのタイプがあります:

① sessionStrage: セッションとは、ユーザーがウェブサイトを閲覧する際に、ウェブサイトにアクセスしてからウェブサイトを閉じるまでの期間を指します。セッションオブジェクトの有効期間はごくわずかです。

② localStorage: データが何であれ、クライアント ハードウェア デバイスにデータを保存します。これは、次回コンピューターの電源を入れたときにもデータがまだそこにあることを意味します。

2 つの違いは、1 つは一時保管用で、もう 1 つは長期保管用であることです。

基本的な使用法を示す簡単なコードを次に示します。

XML/HTML コードコンテンツをクリップボードにコピー

1. <div id="msg" スタイル="margin: 10px 0; border: 1px solid black; padding: 10px; width: 300px;
2. 高さ: 100px;">
3. div>
4. <入力 type="テキスト" id="テキスト" />
5. <select id="type" >
6. <オプション 値="セッション" >セッションストレージオプション>
7. <オプション 値="ローカル" >localStorageオプション>
8. 選択>
9. <ボタン クリック="save( );">
10. データ保存ボタン>
11. <ボタン onclick="load( );">
12. 读取数据ボタン>
13. <スクリプト type="text/ javascript">
14. var msg = ドキュメント.getElementById('msg'),
15. テキスト = ドキュメント.getElementById('text'),
16. タイプ = ドキュメント.getElementById('type');   
18. 関数 save() {
19. var str = text.value;   
20. var t = type.value;   
21. if (t == 'セッション') {
22. sessionStorage.setItem('msg', str);   
23. } else {
24. localStorage.setItem('msg', str);   
25. }
26. }
28. 関数 load() {
29. var t = type.value;   
30. if (t == 'セッション') {
31. msg.innerHTML = sessionStorage.getItem('msg');   
32. } else {
33. msg.innerHTML = localStorage.getItem('msg');   
34. }
35. }
36. スクリプト>

真实场景

实际作業中におけるローカルストレージの使用一般には以下の要件があります：

①缓存一般信息，如搜索页的出城市，到城市，非实時定位信息

② 缓存城市列表データベース、这个データ往往比较大

③每条缓存信息要可追跡，比如服务器通知城市データ更新，这時候最近访问的時候要自动設置过期

④ 每条信息有期日期状態态，期期外時間期間需要服务器拉取データ

XML/HTML コード复制コンテンツ到剪贴板

1. define([], function () {
3. var ストレージ = _.inherit({
4. //デフォルト属性
5. プロパティ: function () {
7. //プロキシ オブジェクト、デフォルトは localstorage
8. this.sProxy = ウィンドウ.localStorage;
//60 * 60 * 24 * 30 * 1000
10. ms ==30 日
11. this.defaultLifeTime = 2592000000 ;
12. //ローカル キャッシュは、すべての localstorage キー値と有効期限間のマッピングを保存するために使用されます
this.keyCache
14. = 'SYSTEM_KEY_TIMEOUT_MAP' ;
//キャッシュ容量がいっぱいになった場合、毎回削除されるキャッシュの数
16. this.removeNum
=
17. 5; }、
19. アサート: function () {
20. if (
this.sProxy
21. === null) {
22. throw 'sProxy プロパティをオーバーライドしません' ; }
23. }、
25. 初期化: function (opts) {
26. this.propertys();
27. this.assert();
28. }、
30. /*
31. ローカルストレージを追加
32. データ形式には、一意のキー値、JSON 文字列、有効期限、入金日が含まれます
33. 記号は書式設定されたリクエスト パラメータで、同じリクエストに異なるパラメータがある場合に新しいデータを返すために使用されます。たとえば、リストが北京市であった場合に上海に切り替わった場合、タグであると判断されます。は異なり、キャッシュされたデータを更新します。タグは署名
と同等です。
34. 各キー値に対して 1 つの情報のみがキャッシュされます
35. */
36. set: 関数 (キー、値、タイムアウト、符号) {
37. var _d = 新しい Date();
//入金日
var
39. indate = _d.getTime();
40. //最後にデータを保存しました
41. var
エンティティ
42. = null;
if (!timeout) {
_d.setTime(_d.getTime() this.defaultLifeTime);
45. タイムアウト
=
46. _d.getTime(); }
47. //
48. this.setKeyCache(キー, タイムアウト)
エンティティ
50. =
this
51. .buildStorageObj(値、更新、タイムアウト、符号); > 試してみましょう {
this.sProxy.setItem(key, JSON.stringify(entity));
true を返します。
} catch (e) {
//ローカルストレージがいっぱいになったら、すべてクリアします
if (
56. e.name
== 'QuotaExceededError') {
// this.sProxy.clear();
58. //ローカルストレージがいっぱいの場合、有効期限に最も近いデータを選択して削除します。これも多少の影響はありますが、キャッシュが多すぎる場合は、このプロセスがすべてクリアされるよりも良いと感じます。 100 ミリ秒以内に、さらに時間がかかります
if (!this.removeLastCache()) throw '今回保存されたデータの量が多すぎます';
this.set(キー、値、タイムアウト、符号);
61. コンソール && console.log(e);
}
62. は false を返します。
63. }、
65. //期限切れのキャッシュを削除
66. RemoveOverdueCache: function () {
67. var tmpObj = null, i, len;
var
69. now = new Date().getTime(); //キーと値のペアを取得します
70. var
cacheStr
71. = this.sProxy.getItem(this.keyCache); var cacheMap
= [];
72. var newMap = [];
if (!cacheStr) {
73. 戻る
}
76. cacheMap
=
77. JSON
.parse(cacheStr);
78. for (i =
0
79. ,
len
80. = cacheMap.length; i < len; > tmpObj = cacheMap[i]; if (tmpObj.timeout
81. < now) { this.sProxy.removeItem(tmpObj.key);
82. } else { newMap.push(tmpObj);
83. }
84. this.sProxy.setItem(this.keyCache, JSON.stringify(newMap));
86. }、
88. RemoveLastCache: function () {
89. 変数 i、レン
90. var num = this.removeNum ||
92. //キーと値のペアを取得します
93. var cacheStr = this.sProxy.getItem(this.keyCache);
var
94. cacheMap = []; var
delMap
95. = [];
//ストレージが大きすぎることを示します
if (!cacheStr) が false を返す
cacheMap.sort(function (a, b) {
a.timeout - b.timeout を返します
});
//削除されたデータ
104. delMap
=
105. cacheMap.splice(0, num); for (i =
0
106. , len = delMap.length; i < len; > this.sProxy.removeItem(delMap[i].key); }
108. this.sProxy.setItem(this.keyCache, JSON.stringify(cacheMap));
109. true を返します。
110. }、
112. setKeyCache: function (key, timeout) {
113. if (!key || !timeout || timeout <
114. new
115. Date().getTime( )) 戻る; var i、len、tmpObj;
116. //現在キャッシュされているキー値文字列を取得します
117. var oldstr
118. = this
119. .sProxy.getItem(this.keyCache); var oldMap = []; //現在のキーがすでに存在するかどうか
120. var フラグ = false
121. ; var
122. obj = {};   
123. obj.key = キー;   
124. obj.timeout = タイムアウト;   
126. if (oldstr) {
127. oldMap = JSON.parse(oldstr);   
128. if (!_.isArray(oldMap)) oldMap = [];   
129. }
131. for (i = 0, len = oldMap.length; i < len; i ) {
132. tmpObj = oldMap[i];   
133. if (tmpObj.key == key) {
134. oldMap[i] = obj;   
135. フラグ = true;   
136. 休憩;   
137. }
138. }
139. if (!flag) oldMap.push(obj);   
140. //最後将新数组を缓存中に放出
141. this.sProxy.setItem(this.keyCache, JSON.stringify(oldMap));   
143. }、
145. buildStorageObj: function (value, indate, timeout, sign) {
146. var obj = {
147. 値: 値、
148. タイムアウト: タイムアウト、
149. 記号: 記号、
150. indate: indate
151. };   
152. オブジェクトを返す;   
153. }、
155. get: function (key,sign) {
156. var result、now = new Date().getTime();
試してみましょう {
158. 結果 = この.sProxy.getItem(key); if (!result) が null を返す
結果
160. = JSON.parse(結果);
//データの有効期限
if (result.timeout
162. <
163. now)
//署名検証が必要です
if (符号) {
if (
166. sign
=== result.sign)
167. 結果の値を返します
null を返します。
} else {
結果の値を返します
172. } catch (e) {
173. コンソール && console.log(e);
}
null を返します。
}、
//署名を取得
getSign: function (key) {
var 結果、
180. sign
=
181. null
;
182. 試してみましょう { 結果 =
この
183. .sProxy.getItem(key);
if (結果) {
184. 結果 = JSON
.parse(結果);
sign
186. = result && result.sign
} catch (e) {
187. コンソール && console.log(e); }  
188. リターン 記号;   
189. }、
191. 削除: 関数 (キー) {
192. return this.sProxy.removeItem(key);   
193. }、
195. clear: function () {
196. this.sProxy.clear();   
197. }
198. });   
200. Storage.getInstance = 関数 () {
201. if (this.instance) {
202. this.instance を返す;   
203. } else {
204. return this.instance = new this();   
205. }
206. };   
208. ストレージを返す;   
210. });  

このセグメントコードにはローカルストレージの基本的な操作が含まれており、上記の処理が実行されているため、実際の使用はさらに抽象化されます：

XML/HTML コード复制コンテンツ到剪贴板

1. define(['AbstractStorage'], function (AbstractStorage) {
3. var ストア = _.inherit({
4. //デフォルト属性
5. プロパティ: function () {
7. //各オブジェクトにはストレージ キーが必要であり、繰り返すことはできません
8. this.key = null;
//データのデフォルトのライフサイクル、S は秒、M は分、D は日
11. this.lifeTime = '30M';
12. //デフォルトの戻りデータ
13. //
this.defaultData
14. = null;
//プロキシ オブジェクト、ローカルストレージ オブジェクト
16. this.sProxy
=
17. new AbstractStorage(); }、
19. setOption: 関数 (オプション) {
20. _.extend(this, options)
;
21. }、
23. アサート: function () {
24. if (
this.key
25. === null) {
26. 'キープロパティを上書きしない' をスローします ; }
27. if (
this.sProxy
28. === null) {
29. throw 'sProxy プロパティをオーバーライドしません' ; }
30. }、
32. 初期化: function (opts) {
33. this.propertys();
34. this.setOption(opts);
35. this.assert();
36. },
38. _getLifeTime: function () {
39. var タイムアウト = 0;   
40. var str = this.lifeTime;   
41. var unit = str.charAt(str.length - 1);   
42. var num = str.substring(0, str.length - 1);   
43. var 地図 = {
44. D: 86400,
45. H: 3600、
46. M: 60,
47. S: 1
48. };   
49. if (typeof unit == 'string') {
50. ユニットユニット = unit.toUpperCase();   
51. }
52. タイムアウト = num;   
53. if (unit) timeout = Map[unit];   
55. //单位は毫秒
56. return num * timeout * 1000 ;   
57. }、
59. //缓存データ
60. set: 関数 (値, 符号) {
61. //获取过期時間
62. var timeout = new Date();   
63. timeout.setTime(timeout.getTime() this._getLifeTime());   
64. this.sProxy.set(this.key, value, timeout.getTime(), sign);   
65. }、
67. //设置单个プロパティ
68. setAttr: function (name, value, sign) {
69. var key, obj;   
70. if (_.isObject(name)) {
71. for (名前のキー) {
72. if (name.hasOwnProperty(key)) this.setAttr(k, name[k], value);   
73. }  
74. 戻る;   
75. }
77. if (!sign) sign = this.getSign();   
79. //获取当前对象
80. obj = this.get(sign) || {};   
81. if (!obj) return;   
82. obj[名前] = 値;   
83. this.set(obj, sign);   
85. }、
87. getSign: function () {
88. return this.sProxy.getSign(this.key);   
89. }、
91. 削除: function () {
92. this.sProxy.remove(this.key);   
93. }、
95. removeAttr: function (attrName) {
96. var obj = this.get() || {};   
97. if (obj[attrName]) {
98. obj[attrName] を削除します。   
99. }
100. this.set(obj);   
101. }、
103. get: function (sign) {
104. var 結果 = [],isEmpty = true、a;   
105. var obj = this.sProxy.get(this.key, sign);   
106. var type = typeof obj;   
107. var o = { 'string': true, 'number': true, 'boolean': true };   
108. if (o[type]) return obj;   
110. if (_.isArray(obj)) {
111. for (var i = 0, len = obj.length; i < len; i ) {
112. 結果[i] = obj[i];   
113. }  
114. } else if (_.isObject(obj)) {
115. 結果 = obj;   
116. }
118. for (a in result) {
119. isEmpty = false;   
120. 休憩;   
121. }
122. return !isEmpty ? 結果: null;   
123. }、
125. getAttr: function (attrName, tag) {
126. var obj = this.get(tag);   
127. var attrVal = null;   
128. if (obj) {
129. attrVal = obj[attrName];   
130. }
131. return attrVal;   
132. }
134. });   
136. Store.getInstance = 関数 () {
137. if (this.instance) {
138. this.instance を返す;   
139. } else {
140. return this.instance = new this();   
141. }
142. };   
144. ストアに戻る;   
145. });  

我们真实使用的時候是使用store这个类操作localstorage，代码结束简单测试：

保存完了、以後ずっと実行要求なし、今日の代コード基本終了、最後に Android ハイブリッド内に後退錉があり、この钮が下に来ると上の 1 つの面に戻り、今度は気候の面のローカルストレージが读取される可能性があります失效！ 一つの解決策はウェブアプリに追加されています：

XML/HTML コード复制コンテンツ到剪贴板

1. window.onunload = function () { };//适合单页应用、不要问我は物么、我也不知道

结语

localstorage は移動開墾必需的技术点，深深理解が必要，特定の务代コード後续会が git 上に放り出す，有関心な友友可去知