cookies sessionStorage和localstorage

相同點(diǎn):都存儲(chǔ)在客戶端

不同點(diǎn):

(1)存儲(chǔ)大小

· cookie數(shù)據(jù)大小不能超過4k。

· sessionStorage和localStorage 雖然也有存儲(chǔ)大小的限制,但比cookie大得多,可以達(dá)到5M或更大。

(2)有效時(shí)間

· localStorage 存儲(chǔ)持久數(shù)據(jù),瀏覽器關(guān)閉后數(shù)據(jù)不丟失除非主動(dòng)刪除數(shù)據(jù);

· sessionStorage 數(shù)據(jù)在當(dāng)前瀏覽器窗口關(guān)閉后自動(dòng)刪除。

· cookie 設(shè)置的cookie過期時(shí)間之前一直有效,即使窗口或?yàn)g覽器關(guān)閉

(3)數(shù)據(jù)與服務(wù)器之間的交互方式

· cookie的數(shù)據(jù)會(huì)自動(dòng)的傳遞到服務(wù)器,服務(wù)器端也可以寫cookie到客戶端

· sessionStorage和localStorage不會(huì)自動(dòng)把數(shù)據(jù)發(fā)給服務(wù)器,僅在本地保存。

獲取cookie的值

//獲取cookie字符串

var strCookie= document.cookie;

//將多cookie切割為多個(gè)名/值對(duì)

var arrCookie= strCookie.split("; ");

var userId;

//遍歷cookie數(shù)組,處理每個(gè)cookie對(duì)

for (var i= 0; i< arrCookie.length; i++) {

var arr= arrCookie[i].split("=");

//找到名稱為userId的cookie,并返回它的值

if ("userId"== arr[0]) {

this.userId= arr[1];

break;

}

}

sessionStorag

(簡(jiǎn)單的說就存儲(chǔ)在瀏覽器頁面會(huì)話中,頁面關(guān)閉則消失)

sessionStorage的特點(diǎn)是,當(dāng)用戶打開一個(gè)標(biāo)簽頁,實(shí)際上就是建立了一個(gè)session會(huì)話,在這個(gè)標(biāo)簽頁里,url發(fā)生跳轉(zhuǎn),sessionStorage實(shí)際上還是保存著,并不會(huì)消失,當(dāng)標(biāo)簽頁關(guān)閉的時(shí)候,數(shù)據(jù)才會(huì)消失。

sessionStorage 屬性允許你訪問一個(gè) session Storage 對(duì)象。它與 localStorage 相似,不同之處在于 localStorage 里面存儲(chǔ)的數(shù)據(jù)沒有過期時(shí)間設(shè)置,而存儲(chǔ)在 sessionStorage 里面的數(shù)據(jù)在頁面會(huì)話結(jié)束時(shí)會(huì)被清除。頁面會(huì)話在瀏覽器打開期間一直保持,并且重新加載或恢復(fù)頁面仍會(huì)保持原來的頁面會(huì)話。

localStorage

localStorage的優(yōu)勢(shì)

1、localStorage拓展了cookie的4K限制

2、localStorage會(huì)可以將第一次請(qǐng)求的數(shù)據(jù)直接存儲(chǔ)到本地,這個(gè)相當(dāng)于一個(gè)5M大小的針對(duì)于前端頁面的數(shù)據(jù)庫,相比于cookie可以節(jié)約帶寬,但是這個(gè)卻是只有在高版本的瀏覽器中才支持的

localStorage的局限

1、瀏覽器的大小不統(tǒng)一,并且在IE8以上的IE版本才支持localStorage這個(gè)屬性

2、目前所有的瀏覽器中都會(huì)把localStorage的值類型限定為string類型,這個(gè)在對(duì)我們?nèi)粘1容^常見的JSON對(duì)象類型需要一些轉(zhuǎn)換

3、localStorage在瀏覽器的隱私模式下面是不可讀取的

4、localStorage本質(zhì)上是對(duì)字符串的讀取,如果存儲(chǔ)內(nèi)容多的話會(huì)消耗內(nèi)存空間,會(huì)導(dǎo)致頁面變卡

5、localStorage不能被爬蟲抓取到

localStorage與sessionStorage的唯一一點(diǎn)區(qū)別就是localStorage屬于永久性存儲(chǔ),而sessionStorage屬于當(dāng)會(huì)話結(jié)束的時(shí)候,sessionStorage中的鍵值對(duì)會(huì)被清空

localStorage****拿到的是字符串****,需要將獲取到的目標(biāo)轉(zhuǎn)換一下

console.log("name",JSON.parse(localStorage.getItem('name')).name)

localStorage****存儲(chǔ)是字符串格式需要轉(zhuǎn)換****(不需要this)

localStorage.setItem('name',JSON.stringify(msg))
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容