這篇文章主要講解了“web本地存儲(chǔ)怎么運(yùn)用”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來(lái)研究和學(xué)習(xí)“web本地存儲(chǔ)怎么運(yùn)用”吧！

創(chuàng)新互聯(lián)服務(wù)項(xiàng)目包括寬甸網(wǎng)站建設(shè)、寬甸網(wǎng)站制作、寬甸網(wǎng)頁(yè)制作以及寬甸網(wǎng)絡(luò)營(yíng)銷(xiāo)策劃等。多年來(lái)，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢(shì)、行業(yè)經(jīng)驗(yàn)、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機(jī)構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，寬甸網(wǎng)站推廣取得了明顯的社會(huì)效益與經(jīng)濟(jì)效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到寬甸省份的部分城市，未來(lái)相信會(huì)繼續(xù)擴(kuò)大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！

web存儲(chǔ)的含義是將數(shù)據(jù)存儲(chǔ)到用戶的電腦上，這樣可以緩解服務(wù)器的壓力，并且提高體驗(yàn)。

1 特性

1、設(shè)置、讀取方便。

2、容量較大，sessionStorage約5M、localStorage約20M。

3、只能存儲(chǔ)字符串，可以將對(duì)象JSON.stringify() 編碼后存儲(chǔ)。

2 window.sessionStorage

1、生命周期為關(guān)閉當(dāng)前頁(yè)面窗口。

2、不能多窗口下數(shù)據(jù)可以共享 （同源策略，百度家的local阿里他們家是拿不到）。

補(bǔ)充：通過(guò)跳轉(zhuǎn)可以 。

運(yùn)用場(chǎng)景：

　 1、頁(yè)面跳轉(zhuǎn)的時(shí)候可以通過(guò)session實(shí)現(xiàn)數(shù)據(jù)共享。

　 2、在一些單頁(yè)面（spa）的運(yùn)用中，進(jìn)行頁(yè)面?zhèn)髦档臅r(shí)候比較有用。

3 window.localStorage

1、永久生效，除非手動(dòng)刪除或用代碼刪除。

2、可以多窗口共享（同源策略）。

運(yùn)用場(chǎng)景：一些不涉及到安全的一些數(shù)據(jù)（不要太過(guò)龐大）都可以存儲(chǔ)到本地。

4 方法詳解

setItem(key, value) 設(shè)置存儲(chǔ)內(nèi)容

window.localStorage/sessionStorage.setItem(key,value);

getItem(key) 讀取存儲(chǔ)內(nèi)容

window.localStorage/sessionStorage.getItem(key,value);

removeItem(key) 刪除鍵值為key的存儲(chǔ)內(nèi)容

window.localStorage/sessionStorage.removeItem(key,value);

clear() 清空所有存儲(chǔ)內(nèi)容

window.localStorage/sessionStorage.empty();

key(n) 以索引值來(lái)獲取鍵名

window.localStorage/sessionStorage.key(n);

length  存儲(chǔ)的數(shù)據(jù)的個(gè)數(shù)

window.localStorage/sessionStorage.length;

區(qū)別：

cookie數(shù)據(jù) : 始終在同源的http請(qǐng)求中攜帶（即使不需要），即cookie在瀏覽器和服務(wù)器間來(lái)回傳遞。而sessionStorage和localStorage不會(huì)自動(dòng)把數(shù)據(jù)發(fā)給服務(wù)器，僅在本地保存。cookie數(shù)據(jù)還有路徑（path）的概念，可以限制cookie只屬于某個(gè)路徑下。存儲(chǔ)大小限制也不同，cookie數(shù)據(jù)不能超過(guò)4k，同時(shí)因?yàn)槊看蝖ttp請(qǐng)求都會(huì)攜帶cookie，所以cookie只適合保存很小的數(shù)據(jù)，如會(huì)話標(biāo)識(shí)。sessionStorage和localStorage 雖然也有存儲(chǔ)大小的限制，但比cookie大得多，可以達(dá)到5M或更大。數(shù)據(jù)有效期不同。

sessionStorage：僅在當(dāng)前瀏覽器窗口關(guān)閉前有效，自然也就不可能持久保持。

localStorage：始終有效，窗口或?yàn)g覽器關(guān)閉也一直保存，因此用作持久數(shù)據(jù)；cookie只在設(shè)置的cookie過(guò)期時(shí)間之前一直有效，即使窗口或?yàn)g覽器關(guān)閉。作用域不同，sessionStorage不能在不同的瀏覽器窗口中共享，即使是同一個(gè)頁(yè)面；localStorage 在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的。

相同點(diǎn)：都是存儲(chǔ)數(shù)據(jù)，存儲(chǔ)在web端，并且都是同源。

不同點(diǎn)：

（1）cookie 只有4K 小 并且每一次請(qǐng)求都會(huì)帶上cookie 體驗(yàn)不好，浪費(fèi)帶寬。

（2）session和local直接存儲(chǔ)在本地，請(qǐng)求不會(huì)攜帶，并且容量比cookie要大的多。

（3）session 是臨時(shí)會(huì)話，當(dāng)窗口被關(guān)閉的時(shí)候就清除掉 ，而 local永久存在，cookie有過(guò)期時(shí)間。

（4）cookie 和local都可以支持多窗口共享，而session不支持多窗口共享 但是都支持a鏈接跳轉(zhuǎn)的新窗口。

感謝各位的閱讀，以上就是“web本地存儲(chǔ)怎么運(yùn)用”的內(nèi)容了，經(jīng)過(guò)本文的學(xué)習(xí)后，相信大家對(duì)web本地存儲(chǔ)怎么運(yùn)用這一問(wèn)題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！

本文題目：web本地存儲(chǔ)怎么運(yùn)用-創(chuàng)新互聯(lián)
鏈接分享：http://weahome.cn/article/dcicjs.html