js客戶端存儲之Web存儲

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性能實踐日誌》