WebStorage全解析

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

創(chuàng)新互聯(lián)自2013年起，先為太谷等服務(wù)建站，太谷等地企業(yè)，進(jìn)行企業(yè)商務(wù)咨詢服務(wù)。為太谷企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。

sessionStorage與localStorage

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

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

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

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

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

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

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

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

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

兼容性如何？

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

sessionStorage測試

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

表1 sessionStorage兼容性測試

	原窗口	target=”_blank”	window.open	ctrl + click	跨域訪問
IE8	是	是	是	是	否
Firefox3.6	是	是	是	否（null)	否
Chrome5	是	是	是	否（undefined)	否
Safari4	是	否	是	否（undefined)	否
Opera10	是	否	否	否（undefined)	否

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

API測試

方法包括以下幾個：

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

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

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

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

表2 API測試

	setItem	removeItem	getItem	clear	key	length	remainingSpace
IE8	是	是	是	是	是	是	是
Firefox3.6	是	是	是	是	是	是	否
Chrome5	是	是	是	是	是	是	否
Safari4	是	是	是	是	是	是	否
Opera10	是	是	是	是	是	是	否

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

事件

標(biāo)準(zhǔn)的事件為onstorage，當(dāng)存儲空間中的數(shù)據(jù)發(fā)生變化時觸發(fā)。此外，IE8中新增了一個onstoragecommit事件，當(dāng)數(shù)據(jù)寫入的時候觸發(fā)。onstorage事件中的事件對象應(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.

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

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

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

表3 onStorage事件對象屬性測試

	key	oldValue	newValue	url	storageArea
IE8	無	無	無	有	無
Firefox3.6	無	無	無	無	無
Chrome5	有	有	有	有	有
Safari4	有	有	有	有	有
Opera10	有	有	有	有	有

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

表4 onStorage事件注冊對象

	事件注冊對象	備注
IE8	document
Firefox3.6	document	必須使用document.addEventListener注冊，否則無效。
Chrome5	window
Safari4	body
Opera10	window

 

缺陷與不足

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

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

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

跨頁面通訊示例

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

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

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

 

網(wǎng)站名稱：WebStorage全解析
轉(zhuǎn)載源于：http://muchs.cn/article0/pdpgio.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供定制網(wǎng)站、移動網(wǎng)站建設(shè)、網(wǎng)站排名、網(wǎng)站導(dǎo)航、全網(wǎng)營銷推廣、建站公司

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)