js—localstorage (本地儲存)必知

foreverGL 發表於 2020-10-21
localStorage

HTML API

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

基本用法

  1. localStorage只要在相同的協議、相同的主機名、相同的埠下,就能讀取/修改到同一份localStorage資料。
  2. sessionStorage比localStorage更嚴苛一點,除了協議、主機名、埠外,還要求在同一視窗(也就是瀏覽器的標籤頁)下。

生存期

  1. localStorage理論上來說是永久有效的,即不主動清空的話就不會消失,即使儲存的資料超出了瀏覽器所規定的大小,也不會把舊資料清空而只會報錯。但需要注意的是,在移動裝置上的瀏覽器或各Native App用到的WebView裡,localStorage都是不可靠的,可能會因為各種原因(比如說退出App、網路切換、記憶體不足等原因)被清空。
  2. sessionStorage的生存期顧名思義,類似於session,只要關閉瀏覽器(也包括瀏覽器的標籤頁),就會被清空。由於sessionStorage的生存期太短,因此應用場景很有限,但從另一方面來看,不容易出現異常情況,比較可靠。

資料結構

  1. localstorage為標準的鍵值對(Key-Value,簡稱KV)資料型別,簡單但也易擴充套件,只要以某種編碼方式把想要儲存進localstorage的物件給轉化成字串,就能輕鬆支援。
  2. 舉點例子:把物件轉換成json字串,就能讓儲存物件了;把圖片轉換成DataUrl(base64),就可以儲存圖片了。另外對於鍵值對資料型別來說,"鍵是唯一的"這個特性也是相當重要的,重複以同一個鍵來賦值的話,會覆蓋上次的值。

容量限制

目前業界基本上統一為5M,已經比cookies的4K要大很多了

域名限制

由於瀏覽器的安全策略,localstorage是無法跨域的,也無法讓子域名繼承父域名的localstorage資料,這點跟cookies的差別還是蠻大的。

異常處理

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

JavaScript 儲存物件

儲存物件方法

  1. key(n) 返回儲存物件中第 n 個鍵的名稱
  2. getItem(keyname) 返回指定鍵的值
  3. setItem(keyname, value) 新增鍵和值,如果對應的值存在,則更新該鍵對應的值。
  4. removeItem(keyname) 移除鍵
  5. clear() 清除儲存物件中所有的鍵

借鑑地址