WEB存儲

客戶端存儲有幾種方式，WEB存儲就是其中一種。最初作為H5的一部分被定義成API形式，后來被剝離出來作為獨立的標準。所描述的API包含localStorage對象和sessionStorage對象，這兩個對象實際都代表同一個Storage對象，是持久化關聯數組。是名值對的映射表。
localStorage和sessionStorage區別在于存儲的有效期和作用域的不同：數據可以存儲多長時間以及誰擁有數據的訪問權。

瀏覽器兼容性

---

存儲有效期

• localStorage
  永久性。除非WEB應用刻意刪除存儲的數據，或者用戶通過設置瀏覽器配置來刪除，否則數據會一直保留在用戶電腦上，永不過期。實際上，localStorage的數據是寫入磁盤中，每次讀取數據時，實際上是從硬盤驅動器上讀取這些字節。

• sessionStorage
  窗口或標簽頁被永久關閉，則通過sessionStorage存儲的數據也被刪除。

---

作用域

都是限定在文檔源級別。（非同源文檔間無法共享）

• localStorage

  • 同源的文檔間共享相同的localStorage數據。它們之間可以互相讀取甚至覆蓋對方數據。非同源的文檔間互相都不能讀取或覆蓋對方的數據（即使運行的腳本是來自同一臺第三方服務器也不行）。

  • 受瀏覽器供應商限制。不能訪問上次存儲在不同瀏覽器的數據。

• sessionStorage

  • 限定在窗口中。如果同源的文檔渲染在不同的瀏覽器標簽頁中，那么它們的數據也無法共享。【窗口指的是頂級窗口。若一個標簽頁中有兩個<iframe>包含同源文檔也可共享】

  • 一個標簽頁中的腳本是無法讀取或覆蓋由另一個標簽頁腳本寫入的數據。
    【補充：文檔流是通過協議、主機名以及端口來決定的。】

存儲API

localStorage與sessionStorage均適用。

localStorage.setItem("x",1);//以"x"的名字存儲一個數值 localStorage.x = 1;//直接向 Web 存儲對象添加鍵/值對localStorage.getItem("x");//獲取數值 localStorage.x;//直接從 Web 存儲對象中檢索鍵/值對localStorage.removeItem("x");//刪除“x”項。 //removeItem是唯一通用的能刪除單個名值對的方式。（因為IE8不支持delete操作符） localStorage.clear();//全部刪除。唯一能刪除存儲對象中所有名值對的方式//將一個數組存儲為字符串 var myArray = new Array('First Name', 'Last Name', 'Email Address'); localStorage.formData = JSON.stringify(myArray);//檢索數組的字符串版本并將它轉換成一個可用的 JavaScript 數組 var myArray = JSON.parse(localStorage.formData);

存儲事件

無論什么時候存儲在localStorage或sessionStorage的數據發送改變，瀏覽器都會在其它對該數據可見的窗口對象上觸發存儲事件。
【對于localStorage，如果瀏覽器兩個標簽頁都打開了來自同源的頁面，其中一個頁面存儲了數據，另外一個標簽頁就會接收到一個存儲事件。】
【對于sessionStorage，只有當相互牽連的窗口的時候才會觸發存儲事件】
【只有當存儲數據真正發生改變的時候才會觸發存儲事件】

與存儲事件相關的事件對象屬性

• key 被設置或移除的項的名字或者鍵名。如果調用clear()，則該屬性值為null

• newValue 保存該項的新值。若調用removeItem()，該屬性值為null

• oldValue 改變或刪除該項前，保存該項原先的值。插入一個新項時，該屬性值為null

• storageArea 好比是目標Window對象上的localStorage屬性或sessionStorage屬性

• url 觸發該存儲變化腳本所在文檔的URL

【localStorage和存儲事件都是采用廣播機制，瀏覽器會對目前正在訪問同樣站點的所有窗口發送消息。】

安全性

【翻譯的比較爛。可以去看官方解釋】

• DNS spoofing attacks
  針對DNS欺騙攻擊，頁面可以使用TLS，來確保他們是來自同一個域從而允許訪問。

• Cross-directory attacks
  共享一個主機名的不同用戶，都共享同一個local storage object。在共享主機時需要謹慎使用。因為其他共享用戶可以讀取并且覆蓋數據。【PS:Even if a path-restriction feature was made available, the usual DOM scripting security model would make it trivial to bypass this protection and access the data from any path.】

• Implementation risks
  主要風險在于惡意網站可以從其他域讀取信息并且對其他域寫入惡意數據。讓第三方站點讀取其他域的數據會造成信息泄露（information leakage）。讓第三方站點寫其他域存儲的數據也會造成信息欺騙（information spoofing）

【Web 存儲并不比 cookies 安全。所以不要在客戶端存儲敏感信息，比如密碼或信用卡信息。】

localStorage優化

由于localStorage的數據是被寫入磁盤中，每次讀取數據是從硬盤驅動器中讀取，速度會很慢。除此之外，從單一localStorage鍵值中讀取的數據量對速度是沒有影響， 而讀取次數越多，速度越慢。
最佳策略：使用盡可能少的鍵值，存取盡可能多的數據。

參考內容：《js權威指南》
使用 HTML5 Web 存儲實現離線工作
《Web性能實踐日志》

總結

以上是生活随笔為你收集整理的js客户端存储之Web存储的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。