コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > H5 チュートリアル > HTML5 での Localstorage の使用に関するチュートリアル_html5 チュートリアル スキル

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

WBOY
リリース： 2016-05-16 15:46:27
オリジナル
1662 人が閲覧しました

ローカルストレージとは

数日前、古いプロジェクトで 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;
    10. //60 * 60 * 24 * 30 * 1000
  10. ms ==30 日
  11. this.defaultLifeTime = 2592000000 ;
  12. //ローカル キャッシュは、すべての localstorage キー値と有効期限間のマッピングを保存するために使用されます
    14. this.keyCache
  14. = 'SYSTEM_KEY_TIMEOUT_MAP' ;
    15. //キャッシュ容量がいっぱいになった場合、毎回削除されるキャッシュの数
  16. this.removeNum
    17. =
  17. 5; }、
  19. アサート: function () {
  20. if (
    21. this.sProxy
  21. === null) {
  22. throw 'sProxy プロパティをオーバーライドしません' ; }
  23. }、
  25. 初期化: function (opts) {
  26. this.propertys();
  27. this.assert();
  28. }、
  30. /*
  31. ローカルストレージを追加
  32. データ形式には、一意のキー値、JSON 文字列、有効期限、入金日が含まれます
  33. 記号は書式設定されたリクエスト パラメータで、同じリクエストに異なるパラメータがある場合に新しいデータを返すために使用されます。たとえば、リストが北京市であった場合に上海に切り替わった場合、タグであると判断されます。は異なり、キャッシュされたデータを更新します。タグは署名
    34. と同等です。
  34. 各キー値に対して 1 つの情報のみがキャッシュされます
  35. */
  36. set: 関数 (キー、値、タイムアウト、符号) {
  37. var _d = 新しい Date();
    38. //入金日
    39. var
  39. indate = _d.getTime();
  40. //最後にデータを保存しました
  41. var
    42. エンティティ
  42. = null;
    43. if (!timeout) {
    44. _d.setTime(_d.getTime() this.defaultLifeTime);
  45. タイムアウト
    46. =
  46. _d.getTime(); }
  47. //
  48. this.setKeyCache(キー, タイムアウト)
    50. エンティティ
  50. =
    51. this
  51. .buildStorageObj(値、更新、タイムアウト、符号); > 試してみましょう {
    52. this.sProxy.setItem(key, JSON.stringify(entity));
    53. true を返します。
    54. } catch (e) {
    55. //ローカルストレージがいっぱいになったら、すべてクリアします
    56. if (
  56. e.name
    57. == 'QuotaExceededError') {
    58. // this.sProxy.clear();
  58. //ローカルストレージがいっぱいの場合、有効期限に最も近いデータを選択して削除します。これも多少の影響はありますが、キャッシュが多すぎる場合は、このプロセスがすべてクリアされるよりも良いと感じます。 100 ミリ秒以内に、さらに時間がかかります
    59. if (!this.removeLastCache()) throw '今回保存されたデータの量が多すぎます';
    60. this.set(キー、値、タイムアウト、符号);
  61. コンソール && console.log(e);
    62. }
  62. は false を返します。
  63. }、
  65. //期限切れのキャッシュを削除
  66. RemoveOverdueCache: function () {
  67. var tmpObj = null, i, len;
    69. var
  69. now = new Date().getTime(); //キーと値のペアを取得します
  70. var
    71. cacheStr
  71. = this.sProxy.getItem(this.keyCache); var cacheMap
    72. = [];
  72. var newMap = [];
    73. if (!cacheStr) {
  73. 戻る
    74. }
  76. cacheMap
    77. =
  77. JSON
    78. .parse(cacheStr);
  78. for (i =
    79. 0
  79. ,
    80. 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);
    94. var
  94. cacheMap = []; var
    95. delMap
  95. = [];
    96. //ストレージが大きすぎることを示します
    97. if (!cacheStr) が false を返す
    99. cacheMap.sort(function (a, b) {
    100. a.timeout - b.timeout を返します
    101. });
    103. //削除されたデータ
  104. delMap
    105. =
  105. cacheMap.splice(0, num); for (i =
    106. 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();
    157. 試してみましょう {
  158. 結果 = この.sProxy.getItem(key); if (!result) が null を返す
    160. 結果
  160. = JSON.parse(結果);
    161. //データの有効期限
    162. if (result.timeout
  162. <
  163. now)
    164. //署名検証が必要です
    165. if (符号) {
    166. if (
  166. sign
    167. === result.sign)
  167. 結果の値を返します
    168. null を返します。
    169. } else {
    170. 結果の値を返します
  172. } catch (e) {
  173. コンソール && console.log(e);
    174. }
    175. null を返します。
    176. }、
    178. //署名を取得
    179. getSign: function (key) {
    180. var 結果、
  180. sign
    181. =
  181. null
    182. ;
  182. 試してみましょう { 結果 =
    183. この
  183. .sProxy.getItem(key);
    184. if (結果) {
  184. 結果 = JSON
    185. .parse(結果);
    186. sign
  186. = result && result.sign
    187. } 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;
    10. //データのデフォルトのライフサイクル、S は秒、M は分、D は日
  11. this.lifeTime = '30M';
  12. //デフォルトの戻りデータ
  13. //
    14. this.defaultData
  14. = null;
    15. //プロキシ オブジェクト、ローカルストレージ オブジェクト
  16. this.sProxy
    17. =
  17. new AbstractStorage(); }、
  19. setOption: 関数 (オプション) {
  20. _.extend(this, options)
    21. ;
  21. }、
  23. アサート: function () {
  24. if (
    25. this.key
  25. === null) {
  26. 'キープロパティを上書きしない' をスローします ; }
  27. if (
    28. 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，代码结束简单测试：
201579150514318.jpg (488×184)

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

XML/HTML コード复制コンテンツ到剪贴板
  1. window.onunload = function () { };//适合单页应用、不要问我は物么、我也不知道

结语

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

関連ラベル：
html5 localstorage
ソース：php.cn
前の記事：HTML5_html5チュートリアルスキルにおけるolタグの使い方を詳しく解説 次の記事：HTML5 デザインと Modification_html5 チュートリアル スキルのいくつかのページ例を共有する
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
ページのメインディスプレイに画像を表示するにはどうすればよいですか? 私がやりたいのは、NASAAPI を使用して写真を受信することです。これらの写真は、マイページのサムネイルとメインディスプレイに表示されます。コードがサムネイルから画像を取得してペ...
から 2024-04-06 15:33:12
0
1
433
PDF ファイルは HTML5 と JavaScript を実行できますか? PDF に埋め込まれるため、どのコンピュータでもブロックされないプログラムを作成してみようという愚かな考えがあります (JavaScript は PDF 内で実行できると聞きました...
から 2024-04-05 12:57:00
0
1
456
HTML5 の enctype と formenctype の違いは何ですか? HTMLLivingStandard (別名、新しい HTML5 仕様) の属性 enctype と formenctype の違いは何でしょうか?私は HTML Standard...
から 2024-04-02 11:47:56
0
1
275
ページをモバイル対応にしますか? たくさんの Web ページといくつかの Web サイトがあります。問題は、私は初心者だということです。基本的な html5 と css3 を使用していますが、それらをスケールアップ...
から 2024-04-01 20:42:38
0
1
259
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート