HTML5 Storage API

Web Storage是HTML5引入的一個非常重要的功能，可以在用戶端本地存儲資料，類似HTML4的cookie，但可實作功能要比cookie強大的多。 

在Web Storage出現之前，遠端的Web伺服器需要存儲用戶端和伺服器間互動使用的所有相關資料。cookie是一個在伺服器和用戶端間來回傳送文本值的内置機制。伺服器可以基于其放在cookie中的資料在不同web頁面間跟蹤使用者的資訊。使用者每次通路某個域是，cookie資料都會被來回傳送。

盡管cookie無處不在，但它還是有一些總所周知的缺點：

1）cookie的大小受限制，cookie大小被限制在4KB，不能接受像檔案或郵件那樣的大資料。

2）隻要有請求涉及cookie，cookie就要在伺服器和浏覽器之間來回傳送（這解釋為什麼本地檔案不能測試cookie）。一方面，這意味着cookie資料在網絡上是可見的，不加密的情況下有安全風險；另一方面，無論加載哪個相關url，cookie中的資料都會消耗網絡帶寬。

Web Storage出現之後，開發者可以将需要跨請求重複通路的資料直接存儲在用戶端的浏覽器中（開發者也可以将資料存儲在javascript對象中，對象在頁面加載時儲存，并且容易擷取），還可以在關閉浏覽器很久之後再次打開時恢複資料，以減少網絡流量。

Web Storage又分為兩種： 

sessionStorage 

localStorage 

key和value都必須為字元串，換言之，web Storage的API隻能操作字元串。 

Web Storage API檢查浏覽器的支援性

檢測window.sessionStorage和window.localStorage是否存在

設定和擷取資料

擷取資料

删除資料

删除存儲清單中的所有資料

設定和擷取的調用不必要出現在同一個網頁上，隻要網頁是同源的（規則、主機和端口）基于相同的鍵，我們都能夠在其他網頁中擷取設定在sessionStorage。大部分開發者對頁面重新加載時丢失腳本資料的問題已經習以為常，但是通過Web Storage API儲存的資料在重新加載頁面之後資料仍然存在。

當使用者關閉視窗或浏覽器，sessionStorage資料将會被清除

localStorage 和sessionStorage的差別在于通路它們的名稱不同，分别是通過localStorage 和sessionStorage對象來通路它們，兩者的行為上的差異主要是資料的儲存時長及它們的共享方式。

sessionStorage

localStorage

資料會儲存在存儲它的視窗或标簽頁關閉時

（浏覽器重新整理時可以存儲資料，浏覽器關閉時不可以）

資料的生命期比視窗或浏覽器的生命期長

資料隻在建構它們的視窗或者标簽頁内可見

資料可被同源的每個視窗或者标簽頁共享

 将資料存儲在本地用戶端，進而從本地而不是遠端擷取資料，即可以降低網絡流量，又可提升浏覽器的響應速度。

一個困擾開發人員的常用問題是，當使用者從應用程式的一個頁面切換到另外一個頁面時如何管理資料。傳統的實作方法是有伺服器存儲資料，當使用者在網頁間切換時來回傳遞資料。還有一種做法是應用程式盡可能讓使用者停留在一個動态更新的網頁上。不過使用者更喜歡在頁面間切換。

JSON對象的存儲

雖然HTML5 Web Storage規範允許将任意類型的對象儲存為鍵-值對形式。實際情況是一些浏覽器将資料限定為文本字元串類型。現代浏覽器原生支援JSON。我們可以通過序列化複雜對象将JSON資料儲存到Storage中，以實作複雜資料類型的持久化。