Web存儲之LocalStorage初探

Web存儲之LocalStorage初探

HTML5的釋出和定稿為前端界帶來巨大的變化，新增的API和特性給業務帶來了更多可能性，讓使用者體驗擁有了更可能的豐富。

· HTML Geolocation 可以定位到使用者的地理位置

· HTML Drag and Drop 拖拽API，可以實作更簡單有效的互動方式

· HTML Local Storage 本地存儲方案， 配合離線緩存可以實作WebApp的本地化

· HTML Application Cache 離線緩存，可以将WebApp離線到本地使用

· HTML Web Workers JS版多線程，适合一些計算密集型的業務

· HTML SSE Server-sent Event 伺服器推送技術，可以把主動權交給伺服器端，往用戶端主動推送資料、消息

· HTML Canvas/WebGL HTML圖像處理API，能夠實作更絢爛和豐富的效果

· HTML Audio/Video HTML音視訊API，能夠更友善處理音視訊

今天，我就來簡單介紹一下​

​LocalStorage​

​ 這個本地存儲。

首先來看一下 關于 ​

​Storage​

​ 的API。

1. Storage.length 隻讀

   傳回一個整數，表示存儲在 Storage 對象中的資料項數量。

2. Storage.key()

   該方法接受一個數值 n 作為參數，并傳回存儲中的第 n 個鍵名。

3. Storage.getItem()

   該方法接受一個鍵名作為參數，傳回鍵名對應的值。

4. Storage.setItem()

   該方法接受一個鍵名和值作為參數，将會把鍵值對添加到存儲中，如果鍵名存在，則更新其對應的值。

5. Storage.removeItem()

   該方法接受一個鍵名作為參數，并把該鍵名從存儲中删除。

6. Storage.clear()

   調用該方法會清空存儲中的所有鍵名。

​

​LocalStorage​

​ 和 ​

​SessionStorage​

​ 共同實作了這些API，可以看到API非常簡單，隻有5個API函數和一個隻讀的​

​length​

​屬性，我們先看一下​

​LocalStorage​

​ 的 DEMO，裡面示範了除了​

​key()​

​ 函數之外的API。

​​rLVvMN​​

可以看到，​

​storage​

​ 的API用例還是很簡單的。

還有一個​

​storage​

​ 的 Event事件，在​

​LocalStorage​

​sessionStorage​

​ 變更的時候會觸發一個​

​Storage​

​ 的事件，但是隻能在同源政策下觸發，并且在目前視窗是不能觸發的。也就是說在同一個浏覽器中，A标簽頁變更​

​Storage​

​，B标簽頁會觸發這個事件，在A裡面是不行的，同時不在同一個浏覽器裡面也是無法觸發的。

Storage事件的屬性如下：

target         Read only       EventTarget     The event target (the topmost target in the DOM tree).
type           Read only       DOMString       The type of event.
bubbles        Read only       boolean         Does the event normally bubble?
cancelable     Read only       boolean         Is it possible to cancel the event?
key            Read only       DOMString (string)  The key being changed.
oldValue       Read only       DOMString (string)  The old value of the key being changed.
newValue       Read only       DOMString (string)  The new value of the key being changed.
url            Read only       DOMString (string)  The address of the document whose key changed.
storageArea    Read only       Storage              The Storage object that was affected.
      

無論是​

​LocalStorage​

​ 、​

​sessionStorage​

​ 還是​

​cookie​

​ 都有各自的優劣，下表我們來列舉一下他們的對比情況。

特性	Cookie	localStorage	sessionStorage
資料的生命期	一般由伺服器生成，可設定失效時間。如果在浏覽器端生成Cookie，預設是關閉浏覽器後失效	除非被清除，否則永久儲存	僅在目前會話下有效，關閉頁面或浏覽器後被清除
存放資料大小	4K左右	一般為5MB
與伺服器端通信	每次都會攜帶在HTTP頭中，如果使用cookie儲存過多資料會帶來性能問題	僅在用戶端（即浏覽器）中儲存，不參與和伺服器的通信
易用性	需要程式員自己封裝，源生的Cookie接口不友好	源生接口可以接受，亦可再次封裝來對Object和Array有更好的支援

當然還有以下情況：

1. cookie由服務端生成，用于辨別使用者身份；而兩個storage用于浏覽器端緩存資料
2. 三者都是鍵值對的集
3. cookie的話，會随http請求一起發送到伺服器；而兩個storage可以由腳本選擇性的送出
4. 會話的storage會在會話結束後銷毀；而localStorage會一直存在直到手動銷毀。cookie會在過期時間之後銷毀。
5. 安全性方面，cookie中一般不建議存儲敏感資訊。兩個storage的資料送出後在服務端一定要校驗（其實任何payload和qs裡的參數都要校驗）。

目前，對于​

​LocalStorage​

​的介紹大概就到此為止了，可能有某些錯誤的地方，也可能有些不準确的地方，歡迎各位指出斧正。