localstorage 必知必會

時間 2019-11-07

標籤 localstorage 必會简体版

原文原文鏈接

HTML API

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

基本使用方法

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（總不能在百度的頁面上能讀到騰訊的localStorage吧，哈哈哈）。
localStorage只要在相同的協議、相同的主機名、相同的端口下，就能讀取/修改到同一份localStorage數據。
sessionStorage比localStorage更嚴苛一點，除了協議、主機名、端口外，還要求在同一窗口（也就是瀏覽器的標籤頁）下。

生存期

localStorage理論上來講是永久有效的，即不主動清空的話就不會消失，即便保存的數據超出了瀏覽器所規定的大小，也不會把舊數據清空而只會報錯。但須要注意的是，在移動設備上的瀏覽器或各Native App用到的WebView裏，localStorage都是不可靠的，可能會由於各類緣由（好比說退出App、網絡切換、內存不足等緣由）被清空。 sessionStorage的生存期顧名思義，相似於session，只要關閉瀏覽器（也包括瀏覽器的標籤頁），就會被清空。因爲sessionStorage的生存期過短，所以應用場景頗有限，但從另外一方面來看，不容易出現異常狀況，比較可靠。html

數據結構

localstorage爲標準的鍵值對（Key-Value,簡稱KV）數據類型，簡單但也易擴展，只要以某種編碼方式把想要存儲進localstorage的對象給轉化成字符串，就能輕鬆支持。舉點例子：把對象轉換成json字符串，就能讓存儲對象了；把圖片轉換成DataUrl（base64），就能夠存儲圖片了。另外對於鍵值對數據類型來講，「鍵是惟一的」這個特性也是至關重要的，重複以同一個鍵來賦值的話，會覆蓋上次的值。java

過時時間

很遺憾，localstorage原生是不支持設置過時時間的，想要設置的話，就只能本身來封裝一層邏輯來實現：ios

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要大不少了，省着點用吧騷年。git

域名限制

因爲瀏覽器的安全策略，localstorage是沒法跨域的，也沒法讓子域名繼承父域名的localstorage數據，這點跟cookies的差異仍是蠻大的。github

異常處理

localstorage在目前的瀏覽器環境來講，還不是徹底穩定的，可能會出現各類各樣的bug，必定要考慮好異常處理。我我的認爲localstorage只是資源本地化的一種優化手段，不能由於使用localstorage就下降了程序的可用性，那種只是在console裏輸出點錯誤信息的異常處理我是絕對反對的。localstorage的異常處理通常用try/catch來捕獲/處理異常。web

如何測試用戶當前瀏覽器是否支持localstorage

目前廣泛的作法是檢測window.localStorage是否存在，但某些瀏覽器存在bug，雖然「支持」localstorage，但在實際過程當中甚至可能出現沒法setItem()這樣的低級bug。所以我建議，能夠經過在try/catch結構裏set/get一個測試數據有無出現異常來判斷該瀏覽器是否支持localstorage，固然測試完後記得刪掉測試數據哦。chrome

瀏覽器兼容性

| 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|json