Web應(yīng)用的發(fā)展，使得客戶(hù)端存儲(chǔ)使用得也越來(lái)越多，而實(shí)現(xiàn)客戶(hù)端存儲(chǔ)的方式則是多種多樣。最簡(jiǎn)單而且兼容性最佳的方案是Cookie，但是作為真正的客戶(hù)端存儲(chǔ)，Cookie則存在很多致命傷。此外，在IE6及以上版本中還可以使用userData Behavior、在Firefox下可以使用globalStorage、在有Flash插件的環(huán)境中可以使用Flash Local Storage，但是這幾種方式都存在兼容性方面的局限性，因此真正使用起來(lái)并不理想。針對(duì)以上情況，HTML5中給出了更加理想的解決方案：假如你需要存儲(chǔ)復(fù)雜的數(shù)據(jù)則可以使用Web Database，可以像客戶(hù)端程序一樣使用SQL（不過(guò)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的具體情況。
Web Storage實(shí)際上由兩部分組成：sessionStorage與localStorage。
sessionStorage用于本地存儲(chǔ)一個(gè)會(huì)話(huà)（session）中的數(shù)據(jù)，這些數(shù)據(jù)只有在同一個(gè)會(huì)話(huà)中的頁(yè)面才能訪問(wèn)并且當(dāng)會(huì)話(huà)結(jié)束后數(shù)據(jù)也隨之銷(xiāo)毀。因此sessionStorage不是一種持久化的本地存儲(chǔ)，僅僅是會(huì)話(huà)級(jí)別的存儲(chǔ)。
localStorage用于持久化的本地存儲(chǔ)，除非主動(dòng)刪除數(shù)據(jù)，否則數(shù)據(jù)是永遠(yuǎn)不會(huì)過(guò)期的。
與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ù)混亂。
接下來(lái)的各種測(cè)試是在以下瀏覽器中進(jìn)行的：IE8、Firefox3.6、Chrome5、Safari4、Opera10，事實(shí)證明各個(gè)瀏覽器在API方面的實(shí)現(xiàn)基本上一致，存在一定的兼容性問(wèn)題，但不影響正常的使用。
本節(jié)主要針對(duì)sessionStorage的一些特性進(jìn)行了測(cè)試，測(cè)試的重點(diǎn)在于各個(gè)瀏覽器對(duì)于session的定義以及跨域情況。測(cè)試方法很簡(jiǎn)單：打開(kāi)頁(yè)面A，在頁(yè)面A中寫(xiě)入當(dāng)前的session數(shù)據(jù)，然后通過(guò)頁(yè)面A中的鏈接或按鈕使用不同的方式進(jìn)入下頁(yè)面B，如果頁(yè)面B中能夠訪問(wèn)到頁(yè)面
表1 sessionStorage兼容性測(cè)試
| 原窗口 | target=”_blank” | window.open | ctrl + click | 跨域訪問(wèn) | |
| IE8 | 是 | 是 | 是 | 是 | 否 |
| Firefox3.6 | 是 | 是 | 是 | 否（null) | 否 |
| Chrome5 | 是 | 是 | 是 | 否（undefined) | 否 |
| Safari4 | 是 | 否 | 是 | 否（undefined) | 否 |
| Opera10 | 是 | 否 | 否 | 否（undefined) | 否 |
從表1中可以看出，處于安全性考慮所有瀏覽器下session數(shù)據(jù)都是不允許跨域訪問(wèn)的，包括跨子域也是不允許的。其他方面主流瀏覽器中的實(shí)現(xiàn)較為一致。
方法包括以下幾個(gè)：
setItem(key,value)、removeItem(key)、getItem(key)、clear()、key(index)；
屬性包括length、remainingSpace(非標(biāo)準(zhǔn))。不過(guò)存儲(chǔ)數(shù)據(jù)時(shí)可以簡(jiǎn)單的使用localStorage.key=value的方式。
測(cè)試地址為：http://varnow.org/pages/html5/web_storage/local/localStorage.html
測(cè)試結(jié)果另人滿(mǎn)意，標(biāo)準(zhǔn)中定義的接口在各個(gè)瀏覽器中都已實(shí)現(xiàn)，此外IE8下新增了一個(gè)非標(biāo)準(zhǔn)的remainingSpace屬性，用于獲取存儲(chǔ)空間中剩余的空間。結(jié)果如表2：
表2 API測(cè)試
| setItem | removeItem | getItem | clear | key | length | remainingSpace | |
| IE8 | 是 | 是 | 是 | 是 | 是 | 是 | 是 |
| Firefox3.6 | 是 | 是 | 是 | 是 | 是 | 是 | 否 |
| Chrome5 | 是 | 是 | 是 | 是 | 是 | 是 | 否 |
| Safari4 | 是 | 是 | 是 | 是 | 是 | 是 | 否 |
| Opera10 | 是 | 是 | 是 | 是 | 是 | 是 | 否 |
此外關(guān)于setItem(key,value)方法中的value類(lèi)型，理論上可以是任意類(lèi)型，不過(guò)實(shí)際上瀏覽器會(huì)調(diào)用value的toString方法來(lái)獲取其字符串值并存儲(chǔ)到本地，因此如果是自定義的類(lèi)型則需要自己定義有意義的toString方法。
標(biāo)準(zhǔn)的事件為onstorage，當(dāng)存儲(chǔ)空間中的數(shù)據(jù)發(fā)生變化時(shí)觸發(fā)。此外，IE8中新增了一個(gè)onstoragecommit事件，當(dāng)數(shù)據(jù)寫(xiě)入的時(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é)果見(jiàn)表3。
表3 onStorage事件對(duì)象屬性測(cè)試
| key | oldValue | newValue | url | storageArea | |
| IE8 | 無(wú) | 無(wú) | 無(wú) | 有 | 無(wú) |
| Firefox3.6 | 無(wú) | 無(wú) | 無(wú) | 無(wú) | 無(wú) |
| Chrome5 | 有 | 有 | 有 | 有 | 有 |
| Safari4 | 有 | 有 | 有 | 有 | 有 |
| Opera10 | 有 | 有 | 有 | 有 | 有 |
此外，不同的瀏覽器事件注冊(cè)的方式以及對(duì)象也不一致，具體如表4。
表4 onStorage事件注冊(cè)對(duì)象
| 事件注冊(cè)對(duì)象 | 備注 | |
| IE8 | document | |
| Firefox3.6 | document | 必須使用document.addEventListener注冊(cè)，否則無(wú)效。 |
| Chrome5 | window | |
| Safari4 | body | |
| Opera10 | window |
Web Storage的缺陷主要集中在其安全性方面，具體體現(xiàn)在以下兩點(diǎn)：
1. 瀏覽器會(huì)為每個(gè)域分配獨(dú)立的存儲(chǔ)空間，即腳本在域A中是無(wú)法訪問(wèn)到域B中的存儲(chǔ)空間的，但是瀏覽器卻不會(huì)檢查腳本所在的域與當(dāng)前域是否相同。即在域B中嵌入域A中的腳本依然可以訪問(wèn)域B中的數(shù)據(jù)。測(cè)試地址：http://varnow.org/pages/html5/web_storage/local/corss_domain_js_access.html
2. 存儲(chǔ)在本地的數(shù)據(jù)未加密而且永遠(yuǎn)不會(huì)過(guò)期，極易造成隱私泄漏。也許需要像保存密碼一樣詢(xún)問(wèn)用戶(hù)是在用私人電腦還是公共電腦來(lái)決定是否將數(shù)據(jù)保存在本地。
示例地址：http://varnow.org/pages/html5/web_storage/app/play.html
玩法很簡(jiǎn)單：選擇 打開(kāi)多個(gè)窗口，頁(yè)面會(huì)自動(dòng)打開(kāi)并定位4個(gè)新窗口，小球會(huì)在多個(gè)窗口間運(yùn)動(dòng)，在小球運(yùn)動(dòng)的過(guò)程中可以拖動(dòng)窗口或者打開(kāi)新的窗口來(lái)控制小球進(jìn)入新的區(qū)域。
實(shí)現(xiàn)原理：每個(gè)新打開(kāi)的窗口會(huì)將自己的坐標(biāo)以及大小寫(xiě)入localStorage，小球在運(yùn)動(dòng)到窗口邊界時(shí)會(huì)檢測(cè)小球?qū)⒁M(jìn)入的下一個(gè)窗口，如果找到該窗口則將小球坐標(biāo)寫(xiě)入并通知新窗口接收小球。
【本文首發(fā)于：搜索研發(fā)部官方博客】http://stblog.baidu-tech.com/?p=453另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)cdcxhl.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線(xiàn)，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性?xún)r(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專(zhuān)為企業(yè)上云打造定制，能夠滿(mǎn)足用戶(hù)豐富、多元化的應(yīng)用場(chǎng)景需求。
重慶分公司
重慶分公司
