localstorage 必知必會

HTML API

localstorage在浏覽器的API有兩個：

localStorage

和

sessionStorage

，存在于window對象中：

localStorage

對應

window.localStorage

，

sessionStorage

對應

window.sessionStorage

。

localStorage

和

sessionStorage

的差別主要是在于其生存期。

基本使用方法

localStorage.setItem("b","isaac");//設定b為"isaac"
var b = localStorage.getItem("b");//擷取b的值,為"isaac"
var a = localStorage.key(); // 擷取第0個資料項的鍵名，此處即為“b”
localStorage.removeItem("b");//清除c的值
localStorage.clear();//清除目前域名下的所有localstorage資料
           

生存期

localStorage

理論上來說是永久有效的，即不主動清空的話就不會消失，即使儲存的資料超出了浏覽器所規定的大小，也不會把舊資料清空而隻會報錯。但需要注意的是，在移動裝置上的浏覽器或各

Native App

用到的

WebView

裡，

localStorage

都是不可靠的，可能會因為各種原因（比如說退出App、網絡切換、記憶體不足等原因）被清空。

sessionStorage

的生存期顧名思義，類似于

session

，隻要關閉浏覽器，就會被清空。由于

sessionStorage

的生存期太短，是以應用場景很有限，但從另一方面來看，不容易出現異常情況，比較可靠。

資料結構

localstorage為标準的鍵值對（Key-Value,簡稱KV）資料類型，簡單但也易擴充，隻要以某種編碼方式把想要存儲進localstorage的對象給轉化成字元串，就能輕松支援。舉點例子：把對象轉換成json字元串，就能讓存儲對象了；把圖檔轉換成DataUrl（base64），就可以存儲圖檔了。另外對于鍵值對資料類型來說，“鍵是唯一的”這個特性也是相當重要的，重複以同一個鍵來指派的話，會覆寫上次的值。

過期時間

很遺憾，localstorage原生是不支援設定過期時間的，想要設定的話，就隻能自己來封裝一層邏輯來實作：

function set(key,value){
  var curtime = new Date().getTime();//擷取目前時間
  localStorage.setItem(key,JSON.stringify({val:value,time:curtime}));//轉換成json字元串序列
}
function get(key,exp)//exp是設定的過期時間
{
  var val = localStorage.getItem(key);//擷取存儲的元素
  var dataobj = JSON.parse(val);//解析出json對象
  if(new Date().getTime() - dataobj.time > exp)//如果目前時間-減去存儲的元素在建立時候設定的時間 > 過期時間
  {
    console.log("expires");//提示過期
  }
  else{
    console.log("val="+dataobj.val);
  }
}
           

容量限制

目前業界基本上統一為5M，已經比cookies的4K要大很多了，省着點用吧騷年。

域名限制

由于浏覽器的安全政策，localstorage是無法跨域的，也無法讓子域名繼承父域名的localstorage資料，這點跟cookies的差别還是蠻大的。

異常處理

localstorage在目前的浏覽器環境來說，還不是完全穩定的，可能會出現各種各樣的bug，一定要考慮好異常處理。我個人認為localstorage隻是資源本地化的一種優化手段，不能因為使用localstorage就降低了程式的可用性，那種隻是在console裡輸出點錯誤資訊的異常處理我是絕對反對的。localstorage的異常處理一般用

try/catch

來捕獲/處理異常。

如何測試使用者目前浏覽器是否支援localstorage

目前普遍的做法是檢測

window.localStorage

是否存在，但某些浏覽器存在bug，雖然“支援”localstorage，但在實際過程中甚至可能出現無法setItem()這樣的低級bug。是以我建議，可以通過在

try/catch

結構裡

set/get

一個測試資料有無出現異常來判斷該浏覽器是否支援localstorage，當然測試完後記得删掉測試資料哦。

浏覽器相容性

Feature	Chrome	Firefox	Internet Explorer	Opera	Safari	Android	Opera Mobile	Safari Mobile
localStorage	4	3.5	8	10.50	4	2.1	11	iOS 3.2
sessionStorage	5	2	8	10.50	4	2.1	11	iOS 3.2

如何調試

在chrome開發者工具裡的

Resources - Local Storage

面闆以及

Resources - Session Storage

面闆裡，可以看到目前域名下的localstorage資料。

在ios裝置上無法重複setItem()

另外，在iPhone/iPad上有時設定setItem()時會出現詭異的QUOTA_EXCEEDED_ERR錯誤，這時一般在setItem之前，先removeItem()就ok了。

相關插件推薦

• store.js
• mozilla/localForage
• localFont

參考文章

• W3C - Web Storage
• HTML5 LocalStorage 本地存儲
• MDN - Window.localStorage