摘要：淺談前端存儲前言應用允許使用瀏覽器提供的實現將數據存儲到用戶的電腦上，這種客戶端存儲相當于賦予了瀏覽器記憶功能。鍵被更改之前的值限制對于和的存儲限制因瀏覽器而異。最初是在客戶端用于存儲會話信息的。

淺談前端存儲 前言

web應用允許使用瀏覽器提供的API實現將數據存儲到用戶的電腦上，這種客戶端存儲相當于賦予了Web瀏覽器記憶功能。

客戶端存儲遵循“同源策略”，因此不同站點的頁面是無法相互讀取對方存儲的數據

客戶端存儲有以下幾種形式：

Web存儲

cookie

IE User Data

離線Web應用

web數據庫

文件系統API

Web Storgage

實現了“web存儲”草案標準的瀏覽器在Window對象上定義了兩個屬性：localStorage和sessionStorage。

支持這兩個屬性的瀏覽器包括IE8+、Firefox3.5+、Chrome4+、Opera10.5+

webStorage的目的是克服由cookie帶來的一些限制，當數據需要被嚴格控制在客戶端上時，無須持續地將數據發回服務器。
webStorage的兩個主要目標是：

提供一種在cookie之外存儲會話數據的途徑

提供一種存儲大量可以跨會話存在的數據的機制

有效期

通過localStorage存儲的數據是永久性的，除非web應用刻意刪除存儲的數據，或者用戶通過設置瀏覽器配置（瀏覽器提供的特定的UI）來刪除，否則數據將一直保留在用戶的電腦上永不過期

sessionStorage的有效期和存儲數據的腳本所在的最頂層的窗口或者是瀏覽器標簽頁是一樣的。一旦窗口或者標簽頁被永久關閉了，那么所有通過sessionStorage存儲的數據也都被刪除了。（現代瀏覽器已經具備了重新打開最近關閉的標簽頁隨后恢復上一次瀏覽的會話功能，因此，這些標簽頁以及與之相關的sessionStorage的有效期可能會更長）。

作用域

localStorage的作用域是限定在文檔源級別的，它同樣也受瀏覽器供應商限制。

sessionStorage的作用域也限定在文檔源中，不僅如此她還被限定在窗口中

存儲API

localStorage和sessionStorage通常被當做普通的JS對象使用，這兩個對象提供了正式的API

保存數據：localStorage.setItem( key, value ); sessionStorage.setItem( key, value );

讀取數據：localStorage.getItem( key ); sessionStorage.getItem( key );

刪除單個數據：localStorage.removeItem( key ); sessionStorage.removeItem( key );

刪除所有數據：localStorage.clear( ); sessionStorage.clear( );

得到某個索引的key：localStorage.key( index ); sessionStorage.key( index );

注：兩個都有屬性 length 表示key 的個數，也即 key 長度。key和value都必須為字符串。

Storage事件

對Storage對象進行任何修改，都會在文檔上觸發storage事件。這個事件的event對象有以下屬性：

domain：發生變化的存儲空間的域名

key：設置或者刪除的鍵名

newValue：如果是設置值，則是新值；如果是刪除鍵，則是null。

oldValue：鍵被更改之前的值

限制

對于localStorage和sessionStorage的存儲限制因瀏覽器而異。具體參考：http://dev-test.nemikor.com/web-storage/support-test/

Cookie 概念

cookie是指Web瀏覽器存儲的少量數據，同時它是與具體的Web頁面或者站點相關的。最初是在客戶端用于存儲會話信息的。

有效期

cookie默認的有效期很短暫，他只能持續在web瀏覽器的會話期間，一旦用戶關閉瀏覽器，cookie保存的數據就丟失。

注：與sessionStorage有效期不同，它的有效期和整個瀏覽器進程而不是單個瀏覽器窗口的有效期一致。

如果需要延長cookie的有效期，可以通過設置max-age屬性，并明確告訴瀏覽器cookie的有效期有多長。

作用域

cookie的作用域是通過文檔源和文檔路徑來確定的。可通過path設置路徑，domain設置域名。

注：cookie的path屬性不能被用做訪問控制機制。若一個頁面想讀取同一站點其他頁面的cookie，只要簡單地將其他頁面以隱藏