社群 學習 工具庫 休閒
搜尋
繁体中文
首頁 > web前端 > H5教程 > HTML5中Localstorage的使用教學_html5教學技巧

HTML5中Localstorage的使用教學_html5教學技巧

WBOY
發布： 2016-05-16 15:46:27
原創
1664 人瀏覽過

什麼是localstorage

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

　　① cookie大小限制在4k左右，不適合存業務資料
　　② cookie每次隨HTTP事務一起發送，浪費頻寬

　　我們是做行動專案的，所以這裡真實適合使用的技術是localstorage，localstorage可以說是對cookie的優化，使用它可以方便在客戶端儲存數據，並且不會隨著HTTP傳輸，但也不是沒有問題：

　　① localstorage大小限制在500萬字符左右，各個瀏覽器不一致
　　② localstorage在隱私模式下不可讀取
　　③ localstorage本質是在隱私模式下不可讀取
　　③ localstorage本質是在隱私模式下不可讀取

　　③ localstorage本質是在寫入檔案一次將資料導入內存，想想就覺得嚇人啊）

　　④ localstorage不能被爬蟲爬取，不要用它完全取代URL傳參

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

　　基礎知識

　　localstorage儲存物件分為兩種：

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

　　② localStorage： 將資料保存在客戶端硬體設備上，不管它是什麼，意思就是下次開啟電腦時候資料還在。

　　兩者差異就是一個作為臨時保存，一個長期保存。 　　這裡來一段簡單的程式碼說明其基本使用：

XML/HTML Code
複製內容到剪貼簿
  1. div id=id=id=id 
  2. 樣式="邊距：10px 0；邊框：1px 實心黑色；內邊距：10px；寬度：300px；
    3.   高度：100px;"
  3. >  
    4. div
  4. >   輸入 類型="文本"  id="文字"
    5.  
  5. /> /> />/> 選擇
    6.  
  6. id=id=id 🎜>>     選項 值
  7. ="會話" >sessionStorage選項>選項>   選項 
  8. 值=值==值=
    9. 🎜>
  9. >本地儲存選項> > > 
  10. 選>  
  11. 按鈕 點擊="保存( ) ;">  
  12.   保存資料按鈕>  
  13. 按鈕 onclick=onclick=onclick=
    14. ;"
  14. >     讀取資料
    15. 按鈕
  15. >  
    16. 腳本
  16.  類型=類型 ">
    17.   
    18.   var 
  18. msg
    19.  = 
  19. 文件.getElementById('msg'),               文字 = 文件
  20.             類型 = 文件   
    21.   函數 save() {        var str = 文字.valueue;     var t = 型別.valueue;
  21.     if (t == '會話') {   
  22.       sessionStorage.setItem('msg', str);   
  23.     } 其他 {   
  24.       localStorage.setItem('msg', str);   
  25.     }   
  26.   }   
  27.   
  28.   函數 load() {   
  29.     var t = 型別.valueue;
    30.     if (
  30. t == '會話') {   
    31.       
  31. msg.innerHTML = sessionStorage

        } 其他 {   

    32.       
  32. msg.innerHTML
    33.  = 
  33. localStorage

        }      }   

    35. 腳本
  35. >
    36.   
  36. 真實場景 實際工作中對本地儲存的使用一般有以下需求： ：① 儲存一般訊息，如搜尋頁的出發城市，到達城市，非即時定位資訊
    37. 【② 快取城市列表數據，這個數據往往比較大
【③每個伺服器資訊都需要可追踪，例如伺服器通知城市資料更新，這個時候在最近一次造訪的時候要自動設定過渡

四個資訊有過期日期，在過期時間需要由伺服器拉取資料

XML/HTML 程式碼

將內容複製到剪貼簿

  1. define([], function () {   
  2.   
  3.   var Storage = _.inherit({  >
    4.     //預設屬性   
    5.     propertys: function () {   
    6.   
    7.       //代理對象，預設為localstorage   
    8.       
  8. this.sProxy = window.   
  9.       //60 * 60 * 24 * 30 * 1000 
    10. ms
  10.       this.defaultLifeTime
    11.  = 
  11. 2592000000>🎜>          //本地快取使用以存放所有localstorage鍵值與過期日期的對應   
  12.       
    13. this.keyCache
  13.  = 
    14. 'SYSTEM”
  14.          //當快取容量已滿，每次刪除的快取數          
    15. this.removeNum
  15.  = 
    16. 5
  16. ;   
  17.     },           assert: function () {   
  18.       if (
  19. this.sProxy === null) {   
    21.         throw 'not override sProxy property';   
    22.       }   
  22.     },   
    23.   
    24.     initialize: function (opts) {   
    25.       this.propertys();   
    26.       this.assert();   
    27.     },   
  27.   
  28.     /*   
  29.     新增localstorage   
  30.     資料格式包含唯一鍵值，json字串，過期日期，存入日期   
  31.     sign 為格式化後的請求參數，用於同一請求不同參數時候返回新數據，例如列表為​​北京的城市，後切換為上海，會判斷tag不同而更新緩存數據，tag相當於簽名  
  32.     每一鍵值只會快取一個訊息   
  33.     */   
  34.     set: function (key, value, timeout, sign) {   
  35.       var _d = new      //存入日期   
  36.       var 
  37. indate = _d.get>;   
  38.       //最終儲存的資料   
  39.       var entity
  40.  = null;          if (!timeout) {   
  41.         _d.setTime(_d.getTime()   this.defaultLifeTime);   
  42.         
  43. timeout = 
  44. _d.       }      
  45.       //   
  46.       this.setKeyCache(key, timeout);   
  47.       entity
  48.  = this
  49.          try {            this.sProxy.setItem(key, JSON.stringify(entity));   
  50.         return true;   
  51.       } catch (e) {   
  52.         //localstorage寫滿時,全清除   
  53.         if (
  54. e.name == 'QuotaExceededError') {   
    55.           //            this.sProxy.clear();   
  55.           //localstorage寫滿時，選擇離過期時間最近的資料刪除，因此也會有些影響，但感覺比全清除好，如果快取過多，此過程比較耗時，100ms以內             if (!this.removeLastCache()) throw '這次資料儲存量過大';   
  56.           this.set(key, value, timeout, sign);   
  57.         }   
  58.         console && console.log(e);   
  59.       }  
  60.       return false;   
  61.     },   
  62.   
  63.     //刪除過期快取  ​​ 
  64.     removeOverdueCache: function () {   
  65.       var tmpObj = null = null
    66.  = 
  66. null
  67.          var now = new
  68.       //取出鍵值對   
  69.       var cacheStr = thisache.       var 
    70. cacheMap
  70.  = [];          var 
    71. newMap
  71.  = [];          if (!cacheStr) {   
  72.         return;   
  73.       }   
  74.   
  75.       
  76. cacheMap = JSON.   
  77.       for (
  78. i = 0cacheMap.length; i  len len         tmpObj
    79.  = 
  79.         if (tmpObj.timeout   
  80.           this.sProxy.removeItem(tmpObj.key);            } else {              newMap.push(tmpObj);   
  81.         }   
  82.       }   
  83.       this.sProxy.setItem(this.keyCache, JSON.stringify(newMap));   
  84.   
  85.     },   
  86.   
  87.     removeLastCache: function () {   
  88.       var i, len;   
  89.       var num = this  
  90.       //取出鍵值對   
  91.       var 
  92. cacheStr = thisache.       var cacheMap
    93.  = [];   
  93.       var delMap
    94.  = [];   
  94.   
  95.       //說明本次儲存過大   
  96.       if (!cacheStr) return false;   
  97.   
  98.       cacheMap.sort(function (a, b) {   
  99.         return a.timeout - b.timeout;   
  100.       });   
  101.   
  102.       //刪除了哪些資料   
  103.       delMap
  104.  = cacheMap      for (i = 
    105. 0delMap.length; i  len len;         this.sProxy.removeItem(delMap[i].key);          }      
  105.       this.sProxy.setItem(this.keyCache, JSON.stringify(cacheMap));   
  106.       return true;   
  107.     },   
  108.   
  109.     setKeyCache: function (key, timeout) {   
  110.       if (!key || !timeout || timeout 
  111.  new
  112.  Date().getTime() ) return;   
  113.       var i, len, tmpObj;             //取得目前已快取的鍵值字串   
  114.       var oldstr
  115.  = this
    116.       var oldMap
  116.  = [];          //目前key是否已存在          var 
  117. flag = false
  118.       var obj
  119.  = {};   
    120.
  120.       obj.key = 鍵；   
  121.       obj.timeout = 逾時；  
  122.   
  123.       if (oldstr) {   
  124.         oldMap = JSON.
  125.         if (!_.isArray(oldMap)) oldMap = [];    = [];   
    126.       }   
  126.   
  127.       為(i = 0 oldMap.length;  i  len len;         
  128. tmpObj = oldMap = oldMap        if (
  129. tmpObj.key == key) {   == key) {   == key) {  
  130.           oldMap[i] = obj;   
  131.           標誌 =           休息；  
  132.         }   
  133.       }   
  134.       if (!flag) oldMap.push(obj);   
  135.       //最後將新的倉庫放到快取中   
  136.       this.sProxy.setItem(this.keyCache, JSON.stringify(oldMap));   
  137.   
  138.     },   
  139.   
  140.     buildStorageObj：函數（數值、日期、逾時、符號）{   
  141.       var 
    142. obj
  142.  = {            值：數值，  
  143.         逾時：逾時，  
  144.         標誌： 標誌，  
  145.         indate: indate   
  146.       }；  
  147.       回 obj;   
  148.     },   
  149.   
  150.     get: function (key, sign) {   
  151.       var result, now = new
    152.       try {   
    153.         
  153. result = this<. class="attribute-value">        if (!result) return null;   
  154.         result
  155.  = JSON.            //資料過期   
  156.         if (result.timeout 
  157.  
  158. now) return null;               //需驗證簽章   
  159.         if (sign) {   
  160.           if (
  161. sign === result.sign)   
  162.             return result.value;              return null;   
  163.         } else {   
  164.           return result.value;   
  165.         }   
  166.   
  167.       } catch (e) {   
  168.         console && console.log(e);   
  169.       }   
  170.       return null;   
  171.     },   
  172.   
  173.     //取得簽章   
  174.     getSign: function (key) {   
  175.       var result, 
  176. sign = 
    177.       try {            result = this
  177. <.>        if (result) {   
  178.           result = J.          
    179. sign
  179.  = 
  180.         }          } catch (e) {            console && console.log(e);   
  181.       }  
  182.       返回標誌；   
  183.     },   
  184.   
  185.     刪除：功能（鍵）{   
  186.       返回 this.sProxy.removeItem(key);   
  187.     },   
  188.   
  189.     清除： 函數 () {   
  190.       this.sProxy.clear();   
  191.     }   
  192.   });   
  193.   
  194.   Storage.getInstance = 函數
    195.     if (this.instance) {   
    196.       返回 this.instance;   
    197.     } 其他 {   
    198.       return 
  198. this.instance = new 🎜>new 🎜
  199.     }   
  200.   }；   
  201.   
  202.   回儲存；   
  203.   
  204. });  
潛在程式碼包含了本地儲存的基本操作，並且對以上問題進行了處理，而真實的使用還要再抽象化：


XML/HTML 程式碼將內容複製到剪貼簿
  1. define(['AbstractStorage'], function (AbstractStorage) {   
  2.   
  3.   var Store = _.inherit({  >
    4.     //預設屬性   
    5.     propertys: function () {   
    6.   
    7.       //每個物件一定要有儲存鍵，且無法重複   
    8.       
  8. this.key = null;   
  9.       //預設一條資料的生命週期，S為秒，M為分，D為天   
  10.       
    11. this.lifeTime
  11.  = '30M'   
  12.       //預設回傳資料   
  13.       //      this.defaultData
  14.  =           //代理對象，localstorage對象   
  15.       this.sProxy
  16.  = new
  17.        },      
  18.     setOption: function (options) {   
  19.       _.extend(this, options);   
  20.     },   
  21.   
  22.     assert: function () {   
  23.       if (
    24. this.key
  24.  === null) {   
  25.         throw 'not override key property';   
  26.       }          if (
    27. this.sProxy
  27.  === null) {   
  28.         throw 'not override sProxy property';   
  29.       }        },   
  30.   
  31.     initialize: function (opts) {   
  32.       this.propertys();   
  33.       this.setOption(opts);   
  34.       this.assert();   
  35.     },   
  36.   
  37.     _getLifeTime: 函數 () {   
  38.       var 逾時 = 0;
    39.       var 
  39. str = 這個

          var 單位

  40.  = str      var num = str

  41.       var 地圖 = {            D: 86400,   
  42.         小時：3600，           男：60，  
  43.         S：1   
  44.       }；  
  45.       if (typeof 
    46. 單位
  46.  == '字串') {   
  47.         
  48. 單位單位 = unit.toUpperCase();  🎜> = unit.toUpperCase();  >       }   
  49.       逾時 = num
  50.  num
  51.         如果 （單位） 逾時 = 地圖
    52.   
  52.       //單位為毫秒          回傳 num * 逾時 * 1000 ;   
    53.     },   
    54.   
    55.     // 快取資料   
    56.     設定：函數（值，符號）{   
    57.       //獲得過渡時間   
    58.       var 
  58. 逾時
    59.  = 
  59. 新
    60.       timeout.setTime(timeout.getTime()   this._getLifeTime());   
    61.       this.sProxy.set(this.key, value, timeout.getTime(), sign);   
  61.     },      
    62.     //設定單一屬性   
    63.     setAttr：函數（名稱、值、符號）{   
    64.       var key, obj;   
    65.       if (_.isObject(name)) {   
    66.         用於（鍵入姓名）{   
    67.           if (name.hasOwnProperty(key)) this.setAttr(k, name[k], value);   
  68.         }  
  69.         返回；   
  70.       }   
  71.   
  72.       if (!sign) sign = 這個
    73.   
    74.       //取得目前物件   
    75.       
  75. obj = 這個.這個..
    76.       if (!obj) 返回；   
    77.       obj[名稱] = 值；   
    78.       this.set(obj, sign);   
    79.   
    80.     },   
    81.   
    82.     getSign: 函數 () {   
    83.       返回 this.sProxy.getSign(this.key);   
    84.     },   
    85.   
    86.     刪除： 函數 () {   
    87.       this.sProxy.remove(this.key);   
    88.     },   
    89.   
    90.     removeAttr：函數（attrName）{   
    91.       var 
  91. obj = 這      if (obj[attrName]) {   
    92.         刪除 obj[attrName];   
    93.       }   
    94.       this.set(obj);   
    95.     },   
    96.   
    97.     取得：函數（符號）{   
    98.       var 
  98. 結果
    99.  = [], 
  99. ，一；          var obj = this.sProxy.(m); 🎜>       var 
  100. 類型 = typeof      var o
    101.  = { 'string': true, )
  101.       if (o[type]) return obj;             if (_.isArray(obj)) {   
  102.          for (var i = 
    103. 0obj.length;  i 
    104.  
  104. len
    105.  
  105. len len len  >           結果[i] = obj[i];            }  
  106.       } else if (_.isObject(obj)) {   
  107.         結果 = obj; >;
    108.       }   
    109.   
    110.       對於（結果）{   
    111.         
  111. 空 = 假;         休息；   
  112.       }   
  113.       返回！ isEmpty？ 結果：空；   
  114.     },   
  115.   
  116.     getAttr：函數（attrName，標籤）{   
  117.       var 
    118. obj
  118.  = 這.get.       var attrVal = 
    119. null
  119.       if (obj) {            
    120. attrVal
  120.  = 
    121. obj
  121.  = obj = obj      }   
  122.       回 attrVal;   
  123.     }   
  124.   
  125.   });   
  126.   
  127.   
    128. Store.getInstance
  128.  = 函數     if (this.instance) {   
    129.       返回 this.instance;   
    130.     } 其他 {   
    131.       return 
  131. this.instance
    132.  = 
  132. new 🎜>new 🎜     }   
  133.   }；   
  134.   
  135.   回店；   
  136. });  
  137. 【我們真正使用的時候是使用store這個類別操作localstorage，程式碼簡單結束測試：
    138.
儲存完成，以後都不會走請求了，所以今天的基本程式碼結束了，最後在android Hybrid中有個後退按鈕，這個按鈕一旦點擊就會回到上一個頁面，這個時候裡面的localstorage就可以讀取了一個簡單的不可靠的解決方案是在webapp中加入：


201579150514318.jpg (488×184)

XML/HTML 程式碼

將內容複製到剪貼簿
window.onunload
     = 
  1. function () { };//適合單頁應用，不要問我為什麼，我也不知道   結語
本地儲存是行動開發必要的技術點，需要深入了解，具體業務代碼後續會放到git上，有興趣的朋友可以去了解

相關標籤：
html5 localstorage
來源：php.cn
上一篇：詳解HTML5中ol標籤的用法_html5教學技巧 下一篇：HTML5幾個設計和修改的頁面範例分享_html5教學技巧
本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
作者最新文章
最新問題
如何讓我的圖像顯示在頁面的主顯示幕上？ 我想做的是使用NASAAPI接收一些照片。然後在我的網頁的縮圖和主顯示屏上顯示這些照片。我只是弄清楚為什麼程式碼不從縮圖中獲取圖像並將其顯示在頁面上。我還使用HTML5以上版本的模...
來自於 2024-04-06 15:33:12
0
1
433
PDF檔案能夠運行HTML5和Javascript嗎？ 我有一個愚蠢的想法，想嘗試製作一個在任何計算機上都不會被阻止的程序，因為它將嵌入在PDF中（我聽說Javascript可以在PDF中運行）。它將在PDF檔案中運行HTML5和Jav...
來自於 2024-04-05 12:57:00
0
1
456
HTML5中的enctype和formenctype有什麼差別？ 我只是想知道HTMLLivingStandard（又稱新的HTML5規範）中的屬性enctype和formenctype之間有什麼區別？我一直在閱讀《開發人員的HTML標準》，但似...
來自於 2024-04-02 11:47:56
0
1
275
使頁面適合行動裝置嗎？ 我有很多網頁和一些網站。問題是，我是一個初學者。我使用基本的html5和css3，但我不知道如何使它們放大、縮小並且適合行動裝置。例如，這是我的頁面之一和我的網站之一，您可以在其中...
來自於 2024-04-01 20:42:38
0
1
259
相關專題
更多>
熱門推薦
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板