相同點(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))