-
web存儲(chǔ)分類
-
客戶端和服務(wù)端
-
認(rèn)識(shí)web存儲(chǔ)
-
隨著web應(yīng)用的發(fā)展,是的客戶端存儲(chǔ)的用途越來(lái)越多,然而實(shí)現(xiàn)客戶端端存儲(chǔ)的方式也是越來(lái)越多樣化。最簡(jiǎn)單最兼容的方式就是cookie,但作為真正的客戶端存儲(chǔ)cookie還是存在著許許多多的弊端的。同時(shí),各種瀏覽器也有屬于自己的存儲(chǔ)方式。例如,IE6以及以上版本中可以使用userData Behavior,在Firefox中可以使用globalStorage,而在Flash插件還可以使用Flash Local Storage,但是這幾種方式存在著兼容性等方面的弊端,對(duì)于客戶端的存儲(chǔ)不屬于最好的方式。
-
由于上述情況,html5中增加的了幾種新的存儲(chǔ)方式。web Database和web Storage?! ?/p>
-
各種方式存儲(chǔ)之間的區(qū)別
-
認(rèn)識(shí)webstorage
-
優(yōu)點(diǎn)
-
缺點(diǎn)
-
localStorage
-
sessionStorage
-
瀏覽器支持
-
這是html5新增的客戶端存儲(chǔ)數(shù)據(jù)的方式,提供了易于操作的api,只需要設(shè)置鍵值的方式即可。在每個(gè)用戶域下面存儲(chǔ)的數(shù)據(jù)大小在5M-10M。包含下面的sessionStorage和localStorage。同時(shí),還包括web Database。
-
存儲(chǔ)的數(shù)據(jù)大小更大。
-
存儲(chǔ)的數(shù)據(jù)保存在客戶端,不需要與瀏覽器進(jìn)行通信,這樣可以減少我們的帶寬消耗。
-
提供了豐富易用的API,使得開(kāi)發(fā)者更加容易的開(kāi)發(fā)。
-
使用獨(dú)立的存儲(chǔ)空間。每個(gè)域下面都有獨(dú)立的存儲(chǔ)空間,每個(gè)空間完全獨(dú)立,可以避免數(shù)據(jù)的錯(cuò)亂(這一點(diǎn)其實(shí)和cookie沒(méi)什么太大的區(qū)別)?! ?/p>
-
由于每個(gè)域下面存儲(chǔ)的數(shù)據(jù)都是獨(dú)立的空間,我們?cè)谝粋€(gè)域下面是不能使用其他域下面的數(shù)據(jù)?!?/p>
-
由于數(shù)據(jù)在沒(méi)有我們進(jìn)行主動(dòng)的刪除的情況下,存儲(chǔ)的數(shù)據(jù)是一直保存在的并且數(shù)據(jù)沒(méi)進(jìn)行加密處理,很容易造成數(shù)據(jù)的竊取?!?/p>
-
localStorage是一種沒(méi)有時(shí)間限制的存儲(chǔ)方式,除非我們自己主動(dòng)的清除數(shù)據(jù)不然數(shù)據(jù)是不會(huì)丟失的?! ?/p>
-
sessionStorage是針對(duì)session的存儲(chǔ)方式,當(dāng)我們?yōu)g覽器或者操作窗口執(zhí)行了關(guān)閉操作,sessionStorage存儲(chǔ)的數(shù)據(jù)將會(huì)丟失。同時(shí)只能在同一個(gè)會(huì)話的頁(yè)面中才能使用。
-
IE8.0以上,F(xiàn)irefox3.0以上,opera10.5以上,chrome3.0以上,safari4.0以上。
-
cookie工作原理
-
優(yōu)點(diǎn)
-
缺點(diǎn)
-
cookie作為一種客戶端存儲(chǔ)的方式,主要采用的是文本存儲(chǔ)。當(dāng)有應(yīng)用程序使用cookie的時(shí)候,服務(wù)器會(huì)將cookie發(fā)送到客戶端,客戶端進(jìn)行保存。當(dāng)用戶進(jìn)行下次訪問(wèn)時(shí),會(huì)將客戶端存儲(chǔ)的cookie發(fā)送到服務(wù)器上面。在開(kāi)發(fā)中,最典型的案例就是用來(lái)存儲(chǔ)用戶信息。
-
簡(jiǎn)單方便
-
瀏覽器負(fù)責(zé)發(fā)送數(shù)據(jù)
-
瀏覽器自己管理不同站點(diǎn)的數(shù)據(jù),不容易發(fā)生數(shù)據(jù)的錯(cuò)亂等情況
-
正如上面講到的cookie工作原理,我們通過(guò)服務(wù)端到客戶端,客戶端到服務(wù)器之間的通信。這樣造成有的不必要的帶寬消耗,同時(shí)也影響頁(yè)面的加載速度導(dǎo)致用戶的體驗(yàn)性變差。
-
存儲(chǔ)的數(shù)據(jù)大小限制,cookie只能存儲(chǔ)4kb大小的數(shù)據(jù)。
-
安全性。cookie的數(shù)據(jù)以文本的方式存在客戶端上面,安全性很低,很容易造成數(shù)據(jù)被竊取。
-
數(shù)量限制。多數(shù)瀏覽器可存儲(chǔ)的cookie數(shù)量為30-50個(gè),也有的瀏覽器支持300個(gè),而IE6只支持20個(gè)。
-
數(shù)據(jù)完整性。當(dāng)我們客戶端設(shè)置為最高安全級(jí)別的時(shí)候,我們的cookie會(huì)失效?! ?/p>
-
cookie的優(yōu)缺點(diǎn)
-
web storage的優(yōu)缺點(diǎn)
-
實(shí)例代碼
-
注意:localStorage和sessionStorage存儲(chǔ)的都是字符串對(duì)象。
-
創(chuàng)建
-
獲取存儲(chǔ)
-
刪除存儲(chǔ)
-
<script type="text/javascript">// 創(chuàng)建均使用localStorage做示例,sessionStorage語(yǔ)法方式和localStorage是一樣的,localStorage(key, value);或者localStorage.key = "value";window.onload = function(){if (window.localStorage) { localStorage.setItem("userName", "張三");} }</script>
-
<script type="text/javascript">window.onload = (window.localStorage &&"userName", "張三""userName"</script>
-
<script type="text/javascript">window.onload = (window.localStorage &&"userName", "hello,world!"</script>
-
檢測(cè)當(dāng)前瀏覽器是否支持
-
<script type="text/javascript">// 驗(yàn)證當(dāng)前的瀏覽器是否支持localStorage和sessionStoragewindow.onload = function(){if (window.localStorage && window.sessionStorage) {alert("你的瀏覽器支持localStorage和sessionStorage"); } }</script>