HTML5本地儲存localStorage與sessionStorage詳解

xiaobangsky 發表於 2020-12-06
localStorage HTML5

本文轉自本地儲存localStorage與sessionStorage詳解

文章目錄

前言

在最近的專案中用到了html5的本地儲存,下面總結一下。

1、html5幾種儲存形式

  • 本地儲存(localStorage && sessionStorage)
  • 離線快取(application cache)
  • indexedDB 和 webSQL

2、localStorage && sessionStorage

過期時間:localStorage 永久儲存,永不失效除非手動刪除。sessionStorage 瀏覽器重新開啟後就消失了

大小:每個域名是5M。

注:cookie一是大小限制,貌似4K左右,二是IE6瀏覽器下每個域名下好像還有個數限制。對於HTML5的本地儲存IE瀏覽器從IE8開始就已經支援了。

IE6~7瀏覽器尚不支援,所以採用傳統的cookie保持資訊,而其他瀏覽器就使用HTML5的本地儲存功能。

寫入:

var arrDisplay = [0, 1, 1, 1];

//儲存,IE6~7 cookie 其他瀏覽器HTML5本地儲存
if (window.localStorage) {
    localStorage.setItem("menuTitle", arrDisplay);    
} else {
    Cookie.write("menuTitle", arrDisplay);    
}

讀取:

var strStoreDate = window.localStorage? localStorage.getItem("menuTitle"): Cookie.read("menuTitle");

HTML API

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

儲存的內容:陣列,圖片,json,樣式,指令碼。。。(只要是能序列化成字串的內容都可以儲存)。

基本使用方法

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

作用域

HTML5本地儲存localStorage與sessionStorage詳解

  • 這裡的作用域指的是:如何隔離開不同頁面之間的localStorage(總不能在百度的頁面上能讀到騰訊的localStorage吧,哈哈哈)。

  • localStorage只要在相同的協議、相同的主機名、相同的埠下,就能讀取/修改到同一份localStorage資料。

  • sessionStoragelocalStorage更嚴苛一點,除了協議、主機名、埠外,還要求在同一視窗(也就是瀏覽器的標籤頁)下。

生存期

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,當然測試完後記得刪掉測試資料哦。

瀏覽器相容性

HTML5本地儲存localStorage與sessionStorage詳解

如何除錯

在chrome開發者工具裡的Resources - Local Storage皮膚以及Resources - Session Storage皮膚裡,可以看到當前域名下的localstorage資料。

HTML5本地儲存localStorage與sessionStorage詳解

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

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

相關外掛推薦

store.js

mozilla/localForage

localFont

參考文章

W3C - Web Storage

HTML5 LocalStorage 本地儲存

MDN - Window.localStorage

相關文章