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

淺談前端存儲 前言

web應(yīng)用允許使用瀏覽器提供的API實現(xiàn)將數(shù)據(jù)存儲到用戶的電腦上，這種客戶端存儲相當于賦予了Web瀏覽器記憶功能。

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

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

Web存儲

cookie

IE User Data

離線Web應(yīng)用

web數(shù)據(jù)庫

文件系統(tǒng)API

Web Storgage

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

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

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

提供一種在cookie之外存儲會話數(shù)據(jù)的途徑

提供一種存儲大量可以跨會話存在的數(shù)據(jù)的機制

有效期

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

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

作用域

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

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

存儲API

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

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

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

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

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

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

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

Storage事件

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

domain：發(fā)生變化的存儲空間的域名

key：設(shè)置或者刪除的鍵名

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

oldValue：鍵被更改之前的值

限制

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

Cookie 概念

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

有效期

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

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

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

作用域

cookie的作用域是通過文檔源和文檔路徑來確定的?？赏ㄟ^path設(shè)置路徑，domain設(shè)置域名。

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