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

什麼是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；
  高度：100px;"
3. >  
div
4. >   輸入 類型="文本"  id="文字"
 
5. /> /> />/> 選擇
 
6. id=id=id 🎜>>     選項 值
7. ="會話" >sessionStorage選項>選項>   選項 
8. 值=值==值=
🎜>
9. >本地儲存選項> > > 
10. 選>  
11. 按鈕 點擊="保存( ) ;">  
12.   保存資料按鈕>  
13. 按鈕 onclick=onclick=onclick=
;"
14. >     讀取資料
按鈕
15. >  
腳本
16.  類型=類型 ">
  
  var 
18. msg
 = 
19. 文件.getElementById('msg'),               文字 = 文件
20.             類型 = 文件   
  函數 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;
    if (
30. t == '會話') {   
      
31. msg.innerHTML = sessionStorage

        } 其他 {   

      
32. msg.innerHTML
 = 
33. localStorage

        }      }   

腳本
35. >
  
36. 真實場景 實際工作中對本地儲存的使用一般有以下需求： ：① 儲存一般訊息，如搜尋頁的出發城市，到達城市，非即時定位資訊
【② 快取城市列表數據，這個數據往往比較大

【③每個伺服器資訊都需要可追踪，例如伺服器通知城市資料更新，這個時候在最近一次造訪的時候要自動設定過渡

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

XML/HTML 程式碼

將內容複製到剪貼簿

1. define([], function () {   
2.   
3.   var Storage = _.inherit({  >
    //預設屬性   
    propertys: function () {   
  
      //代理對象，預設為localstorage   
      
8. this.sProxy = window.   
9.       //60 * 60 * 24 * 30 * 1000 
ms
10.       this.defaultLifeTime
 = 
11. 2592000000>🎜>          //本地快取使用以存放所有localstorage鍵值與過期日期的對應   
12.       
this.keyCache
13.  = 
'SYSTEM”
14.          //當快取容量已滿，每次刪除的快取數          
this.removeNum
15.  = 
5
16. ;   
17.     },           assert: function () {   
18.       if (
19. this.sProxy === null) {   
        throw 'not override sProxy property';   
      }   
22.     },   
  
    initialize: function (opts) {   
      this.propertys();   
      this.assert();   
    },   
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') {   
          //            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. null
67.          var now = new
68.       //取出鍵值對   
69.       var cacheStr = thisache.       var 
cacheMap
70.  = [];          var 
newMap
71.  = [];          if (!cacheStr) {   
72.         return;   
73.       }   
74.   
75.       
76. cacheMap = JSON.   
77.       for (
78. i = 0cacheMap.length; i  len len         tmpObj
 = 
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.       var delMap
 = [];   
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 = 
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
      var oldMap
116.  = [];          //目前key是否已存在          var 
117. flag = false
118.       var obj
119.  = {};   
120.       obj.key = 鍵；   
121.       obj.timeout = 逾時；  
122.   
123.       if (oldstr) {   
124.         oldMap = JSON.
125.         if (!_.isArray(oldMap)) oldMap = [];    = [];   
      }   
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 
obj
142.  = {            值：數值，  
143.         逾時：逾時，  
144.         標誌： 標誌，  
145.         indate: indate   
146.       }；  
147.       回 obj;   
148.     },   
149.   
150.     get: function (key, sign) {   
151.       var result, now = new
      try {   
        
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 = 
      try {            result = this
177. <.>        if (result) {   
178.           result = J.          
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 = 函數
    if (this.instance) {   
      返回 this.instance;   
    } 其他 {   
      return 
198. this.instance = new 🎜>new 🎜
199.     }   
200.   }；   
201.   
202.   回儲存；   
203.   
204. });  

潛在程式碼包含了本地儲存的基本操作，並且對以上問題進行了處理，而真實的使用還要再抽象化：

XML/HTML 程式碼將內容複製到剪貼簿

1. define(['AbstractStorage'], function (AbstractStorage) {   
2.   
3.   var Store = _.inherit({  >
    //預設屬性   
    propertys: function () {   
  
      //每個物件一定要有儲存鍵，且無法重複   
      
8. this.key = null;   
9.       //預設一條資料的生命週期，S為秒，M為分，D為天   
10.       
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 (
this.key
24.  === null) {   
25.         throw 'not override key property';   
26.       }          if (
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;
      var 
39. str = 這個

          var 單位

40.  = str      var num = str
41.       var 地圖 = {            D: 86400,   
42.         小時：3600，           男：60，  
43.         S：1   
44.       }；  
45.       if (typeof 
單位
46.  == '字串') {   
47.         
48. 單位單位 = unit.toUpperCase();  🎜> = unit.toUpperCase();  >       }   
49.       逾時 = num
50.  num
51.         如果 （單位） 逾時 = 地圖
  
52.       //單位為毫秒          回傳 num * 逾時 * 1000 ;   
    },   
  
    // 快取資料   
    設定：函數（值，符號）{   
      //獲得過渡時間   
      var 
58. 逾時
 = 
59. 新
      timeout.setTime(timeout.getTime()   this._getLifeTime());   
      this.sProxy.set(this.key, value, timeout.getTime(), sign);   
61.     },      
    //設定單一屬性   
    setAttr：函數（名稱、值、符號）{   
      var key, obj;   
      if (_.isObject(name)) {   
        用於（鍵入姓名）{   
          if (name.hasOwnProperty(key)) this.setAttr(k, name[k], value);   
68.         }  
69.         返回；   
70.       }   
71.   
72.       if (!sign) sign = 這個
  
      //取得目前物件   
      
75. obj = 這個.這個..
      if (!obj) 返回；   
      obj[名稱] = 值；   
      this.set(obj, sign);   
  
    },   
  
    getSign: 函數 () {   
      返回 this.sProxy.getSign(this.key);   
    },   
  
    刪除： 函數 () {   
      this.sProxy.remove(this.key);   
    },   
  
    removeAttr：函數（attrName）{   
      var 
91. obj = 這      if (obj[attrName]) {   
        刪除 obj[attrName];   
      }   
      this.set(obj);   
    },   
  
    取得：函數（符號）{   
      var 
98. 結果
 = [], 
99. ，一；          var obj = this.sProxy.(m); 🎜>       var 
100. 類型 = typeof      var o
 = { 'string': true, )
101.       if (o[type]) return obj;             if (_.isArray(obj)) {   
102.          for (var i = 
0obj.length;  i 
 
104. len
 
105. len len len  >           結果[i] = obj[i];            }  
106.       } else if (_.isObject(obj)) {   
107.         結果 = obj; >;
      }   
  
      對於（結果）{   
        
111. 空 = 假;         休息；   
112.       }   
113.       返回！ isEmpty？ 結果：空；   
114.     },   
115.   
116.     getAttr：函數（attrName，標籤）{   
117.       var 
obj
118.  = 這.get.       var attrVal = 
null
119.       if (obj) {            
attrVal
120.  = 
obj
121.  = obj = obj      }   
122.       回 attrVal;   
123.     }   
124.   
125.   });   
126.   
127.   
Store.getInstance
128.  = 函數     if (this.instance) {   
      返回 this.instance;   
    } 其他 {   
      return 
131. this.instance
 = 
132. new 🎜>new 🎜     }   
133.   }；   
134.   
135.   回店；   
136. });  
137. 【我們真正使用的時候是使用store這個類別操作localstorage，程式碼簡單結束測試：

儲存完成，以後都不會走請求了，所以今天的基本程式碼結束了，最後在android Hybrid中有個後退按鈕，這個按鈕一旦點擊就會回到上一個頁面，這個時候裡面的localstorage就可以讀取了一個簡單的不可靠的解決方案是在webapp中加入：

XML/HTML 程式碼

將內容複製到剪貼簿

window.onunload

 = 
1. function () { };//適合單頁應用，不要問我為什麼，我也不知道   結語

本地儲存是行動開發必要的技術點，需要深入了解，具體業務代碼後續會放到git上，有興趣的朋友可以去了解