HTML5本地存儲Localstorage

作者：葉小釵 2015-08-13 15:56:44

移動開發

localstorage可以說是對cookie的優化，使用它可以方便在客戶端存儲數據，并且不會隨著HTTP傳輸

[[145256]]

什么是localstorage

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

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

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

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

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

localstorage的使用

基礎知識

localstorage存儲對象分為兩種：

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

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

兩者區別就是一個作為臨時保存，一個長期保存。

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

<div id="msg" style="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/javascript"> 
   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的使用一般有以下需求：

① 緩存一般信息，如搜索頁的出發城市，達到城市，非實時定位信息

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

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

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

⑤ ......

define([], function () { 
  
   var Storage = _.inherit({ 
     //默認屬性 
     propertys: function () { 
  
       //代理對象，默認為localstorage 
       this.sProxy = window.localStorage; 
  
       //60 * 60 * 24 * 30 * 1000 ms ==30天 
       this.defaultLifeTime = 2592000000; 
  
       //本地緩存用以存放所有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不同而更新緩存數據，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寫滿時，選擇離過期時間最近的數據刪除，這樣也會有些影響，但是感覺比全清除好些，如果緩存過多，此過程比較耗時，100ms以內 
           if (!this.removeLastCache()) throw '本次數據存儲量過大'; 
           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; 
  
       //獲取當前已經緩存的鍵值字符串 
       var oldstr = this.sProxy.getItem(this.keyCache); 
       var oldMap = []; 
       //當前key是否已經存在 
       var flag = 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 (!flag) oldMap.push(obj); 
       //***將新數組放到緩存中 
       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的基本操作，并且對以上問題做了處理，而真實的使用還要再抽象：

define(['AbstractStorage'], function (AbstractStorage) { 
 
  var Store = _.inherit({ 
    //默認屬性 
    propertys: function () { 
 
      //每個對象一定要具有存儲鍵，并且不能重復 
      this.key = null; 
 
      //默認一條數據的生命周期，S為秒，M為分，D為天 
      this.lifeTime = '30M'; 
 
      //默認返回數據 
      //      this.defaultData = null; 
 
      //代理對象，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 ; 
    }, 
 
    //緩存數據 
    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，代碼結束簡單測試：

存儲完成，以后都不會走請求，于是今天的代碼基本結束。

其它

隱私模式下可以采用window.name模擬sessionStorage的方式處理，因為window.name是可做保存的，這個也是其解決跨域方案的原因。

在android Hybrid中有一后退按鈕，此按鈕一旦按下會回到上一個頁面，這個時候里面的localstorage可能會讀取失效！一個簡單不靠譜的解決方案是在webapp中加入：

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

結語

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

責任編輯：倪明來源：博客園