localstorage 必知必會

HTML API

localstorage在瀏覽器的API有兩個:localStoragesessionStorage,存在於window對象中:localStorage對應window.localStoragesessionStorage對應window.sessionStorage
localStoragesessionStorage的區別主要是在於其生存期。

基本使用方法

localStorage.setItem("b","isaac");//設置b爲"isaac"
var b = localStorage.getItem("b");//獲取b的值,爲"isaac"
var a = localStorage.key(0); // 獲取第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了。

相關插件推薦

參考文章

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章