Web應(yīng)用的發(fā)展，使得客戶端存儲(chǔ)使用得也越來越多，而實(shí)現(xiàn)客戶端存儲(chǔ)的方式則是多種多樣。最簡(jiǎn)單而且兼容性最佳的方案是Cookie，但是作為真正的客戶端存儲(chǔ)，Cookie則存在很多致命傷。此外，在IE6及以上版本中還可以使用userData-Behavior、在Firefox下可以使用globalStorage、在有Flash插件的環(huán)境中可以使用Flash-Local-Storage，但是這幾種方式都存在兼容性方面的局限性，因此真正使用起來并不理想。針對(duì)以上情況，HTML5中給出了更加理想的解決方案：假如你需要存儲(chǔ)復(fù)雜的數(shù)據(jù)則可以使用Web Database，可以像客戶端程序一樣使用SQL（不過Web Database標(biāo)準(zhǔn)當(dāng)前正陷于僵局之中，而且目前已經(jīng)實(shí)現(xiàn)的瀏覽器很有限）；假如你需要存儲(chǔ)的只是簡(jiǎn)單的用key/value對(duì)即可解決的數(shù)據(jù)則可以使用Web Storage。 本文主要從各個(gè)方面介紹一下Web Storage的具體情況。

sessionStorage與localStorage

Web Storage實(shí)際上由兩部分組成：sessionStorage與localStorage。

sessionStorage用于本地存儲(chǔ)一個(gè)會(huì)話（session）中的數(shù)據(jù)，這些數(shù)據(jù)只有在同一個(gè)會(huì)話中的頁面才能訪問并且當(dāng)會(huì)話結(jié)束后數(shù)據(jù)也隨之銷毀。因此sessionStorage不是一種持久化的本地存儲(chǔ)，僅僅是會(huì)話級(jí)別的存儲(chǔ)。

localStorage用于持久化的本地存儲(chǔ)，除非主動(dòng)刪除數(shù)據(jù)，否則數(shù)據(jù)是永遠(yuǎn)不會(huì)過期的。

為什么選擇Web Storage而不是Cookie？

與Cookie相比，Web Storage存在不少的優(yōu)勢(shì)，概括為以下幾點(diǎn)：

1. 存儲(chǔ)空間更大：IE8下每個(gè)獨(dú)立的存儲(chǔ)空間為10M，其他瀏覽器實(shí)現(xiàn)略有不同，但都比Cookie要大很多。

2. 存儲(chǔ)內(nèi)容不會(huì)發(fā)送到服務(wù)器：當(dāng)設(shè)置了Cookie后，Cookie的內(nèi)容會(huì)隨著請(qǐng)求一并發(fā)送的服務(wù)器，這對(duì)于本地存儲(chǔ)的數(shù)據(jù)是一種帶寬浪費(fèi)。而Web Storage中的數(shù)據(jù)則僅僅是存在本地，不會(huì)與服務(wù)器發(fā)生任何交互。

3. 更多豐富易用的接口：Web Storage提供了一套更為豐富的接口，使得數(shù)據(jù)操作更為簡(jiǎn)便。

4. 獨(dú)立的存儲(chǔ)空間：每個(gè)域（包括子域）有獨(dú)立的存儲(chǔ)空間，各個(gè)存儲(chǔ)空間是完全獨(dú)立的，因此不會(huì)造成數(shù)據(jù)混亂。

兼容性如何？

接下來的各種測(cè)試是在以下瀏覽器中進(jìn)行的：IE8、Firefox3.6、Chrome5、Safari4、Opera10，事實(shí)證明各個(gè)瀏覽器在API方面的實(shí)現(xiàn)基本上一致，存在一定的兼容性問題，但不影響正常的使用。

sessionStorage測(cè)試

本節(jié)主要針對(duì)sessionStorage的一些特性進(jìn)行了測(cè)試，測(cè)試的重點(diǎn)在于各個(gè)瀏覽器對(duì)于session的定義以及跨域情況。測(cè)試方法很簡(jiǎn)單：打開頁面A，在頁面A中寫入當(dāng)前的session數(shù)據(jù)，然后通過頁面A中的鏈接或按鈕使用不同的方式進(jìn)入下頁面B，如果頁面B中能夠訪問到頁面A中的數(shù)據(jù)則說明瀏覽器將當(dāng)前情況的頁面A、B視為同一個(gè)session。測(cè)試的具體結(jié)果如表1：

表1 sessionStorage兼容性測(cè)試

從表1中可以看出，處于安全性考慮所有瀏覽器下session數(shù)據(jù)都是不允許跨域訪問的，包括跨子域也是不允許的。其他方面主流瀏覽器中的實(shí)現(xiàn)較為一致。

API測(cè)試

方法包括以下幾個(gè)：

setItem(key,value)、removeItem(key)、getItem(key)、clear()、key(index)；

屬性包括length、remainingSpace(非標(biāo)準(zhǔn))。不過存儲(chǔ)數(shù)據(jù)時(shí)可以簡(jiǎn)單的使用localStorage.key=value的方式。

測(cè)試地址為：http://varnow.org/pages/html5/web_storage/local/localStorage.html

測(cè)試結(jié)果另人滿意，標(biāo)準(zhǔn)中定義的接口在各個(gè)瀏覽器中都已實(shí)現(xiàn)，此外IE8下新增了一個(gè)非標(biāo)準(zhǔn)的remainingSpace屬性，用于獲取存儲(chǔ)空間中剩余的空間。結(jié)果如表2：

表2 API測(cè)試

此外關(guān)于setItem(key,value)方法中的value類型，理論上可以是任意類型，不過實(shí)際上瀏覽器會(huì)調(diào)用value的toString方法來獲取其字符串值并存儲(chǔ)到本地，因此如果是自定義的類型則需要自己定義有意義的toString方法。

事件

標(biāo)準(zhǔn)的事件為onstorage，當(dāng)存儲(chǔ)空間中的數(shù)據(jù)發(fā)生變化時(shí)觸發(fā)。此外，IE8中新增了一個(gè)onstoragecommit事件，當(dāng)數(shù)據(jù)寫入的時(shí)候觸發(fā)。onstorage事件中的事件對(duì)象應(yīng)該支持以下屬性：

The key attribute represents the key being changed.
The oldValue attribute represents the old value of the key being changed.
The newValue attribute represents the new value of the key being changed.
The url attribute represents the address of the document whose key changed.
The storageArea attribute represents the Storage object that was affected.

對(duì)于這一標(biāo)準(zhǔn)的實(shí)現(xiàn)，webkit內(nèi)核的瀏覽器（Chrome、Safari）以及Opera是完全遵循標(biāo)準(zhǔn)的，IE8則只實(shí)現(xiàn)了url，F(xiàn)irefox下則均未實(shí)現(xiàn)。

測(cè)試地址為：http://varnow.org/pages/html5/web_storage/local/event.html

具體結(jié)果見表3。

表3 onStorage事件對(duì)象屬性測(cè)試

此外，不同的瀏覽器事件注冊(cè)的方式以及對(duì)象也不一致，具體如表4。

表4 onStorage事件注冊(cè)對(duì)象

缺陷與不足

Web Storage的缺陷主要集中在其安全性方面，具體體現(xiàn)在以下兩點(diǎn)：

1. 瀏覽器會(huì)為每個(gè)域分配獨(dú)立的存儲(chǔ)空間，即腳本在域A中是無法訪問到域B中的存儲(chǔ)空間的，但是瀏覽器卻不會(huì)檢查腳本所在的域與當(dāng)前域是否相同。即在域B中嵌入域A中的腳本依然可以訪問域B中的數(shù)據(jù)。測(cè)試地址：http://varnow.org/pages/html5/web_storage/local/corss_domain_js_access.html

2. 存儲(chǔ)在本地的數(shù)據(jù)未加密而且永遠(yuǎn)不會(huì)過期，極易造成隱私泄漏。也許需要像保存密碼一樣詢問用戶是在用私人電腦還是公共電腦來決定是否將數(shù)據(jù)保存在本地。

跨頁面通訊示例

示例地址：http://varnow.org/pages/html5/web_storage/app/play.html

玩法很簡(jiǎn)單：選擇 打開多個(gè)窗口，頁面會(huì)自動(dòng)打開并定位4個(gè)新窗口，小球會(huì)在多個(gè)窗口間運(yùn)動(dòng)，在小球運(yùn)動(dòng)的過程中可以拖動(dòng)窗口或者打開新的窗口來控制小球進(jìn)入新的區(qū)域。

實(shí)現(xiàn)原理：每個(gè)新打開的窗口會(huì)將自己的坐標(biāo)以及大小寫入localStorage，小球在運(yùn)動(dòng)到窗口邊界時(shí)會(huì)檢測(cè)小球?qū)⒁M(jìn)入的下一個(gè)窗口，如果找到該窗口則將小球坐標(biāo)寫入并通知新窗口接收小球。

來源：http://www.baiduux.com/blog/2010/06/21/web-storage%E5%85%A8%E8%A7%A3%E6%9E%90/