一梢杭、什么是localStorage
JSON。parse()作用是將字符串轉(zhuǎn)化成json數(shù)組剧防，JSON.stringify()作用是將json數(shù)組轉(zhuǎn)換成字符串
對(duì)瀏覽器來(lái)說(shuō)席覆，使用Web Storage存儲(chǔ)鍵值對(duì)比存儲(chǔ)Cookie方式更直觀，而且容量更大菌仁，它包含兩種：localStorage和sessionStorage
- sessionStorage（臨時(shí)存儲(chǔ)）：為每一個(gè)數(shù)據(jù)源維持一個(gè)存儲(chǔ)區(qū)域浩习，在瀏覽器打開(kāi)期間存在，包括頁(yè)面重新加載
- loalStorage（長(zhǎng)期儲(chǔ)存）：與sessionStorage一樣济丘，但是瀏覽器關(guān)閉后谱秽，數(shù)據(jù)依然會(huì)一直存在
所以上次使用cookie的時(shí)候就遇到了一個(gè)坑，設(shè)置后馬上訪問(wèn)session會(huì)獲取不到摹迷，蛋痛疟赊，還需要刷新一下，原因是：
當(dāng)我們首次訪問(wèn)設(shè)置Cookie的頁(yè)面是峡碉，服務(wù)器會(huì)把設(shè)置的Cookie值通過(guò)響應(yīng)頭送過(guò)來(lái)近哟，告訴瀏覽器將cookie存儲(chǔ)的本地相應(yīng)文件夾中(注意：第一次訪問(wèn)時(shí)本地還沒(méi)有存儲(chǔ)Cookie，所以此時(shí)獲取不到值)鲫寄；
當(dāng)?shù)诙卧L問(wèn)時(shí)（或是進(jìn)行cookie設(shè)置后吉执，過(guò)期前所有的訪問(wèn)）時(shí)疯淫，請(qǐng)求頭信息中你都會(huì)把Cookie值攜帶。
二戳玫、使用方法
- 注意：sessionStorage和localStorage的用法基本一致熙掺，引用類型的值要轉(zhuǎn)換成JSON，所以這里就之列舉localStorage
1.保存
//對(duì)象
const info = {name: "huo", age: 18,id: "1"}
//字符串
const str = "haha";
localStorage.setItem('huo',JSON.stringify(info));
localStorage.setItem('zheng',str)
2.獲取
var data1 = JSON.parse(localStorage.getItem('hou'));
var data2 = localStorage.getItem('zheng')
3.刪除
//刪除某個(gè)
localStorage.removeItem("hou")
//刪除所有
localStorage.clear();
4.監(jiān)聽(tīng)
//Storage 發(fā)生變化（增加咕宿、更新币绩、刪除）時(shí)的 觸發(fā)，同一個(gè)頁(yè)面發(fā)生的改變不會(huì)觸發(fā)府阀，只會(huì)監(jiān)聽(tīng)同一域名下其他頁(yè)面改變
Storagewindow.addEventListener('storage', function (e) {
console.log('key', e.key);
console.log('oldValue', e.oldValue);
console.log('newValue', e.newValue);
console.log('url', e.url);
})
5.瀏覽器中查看
6.注意點(diǎn)
localStorage有效期是永久的缆镣。一般的瀏覽器能存儲(chǔ)的是5MB左右。sessionStorage api與localStorage相同试浙。
sessionStorage默認(rèn)的有效期是瀏覽器的會(huì)話時(shí)間（也就是說(shuō)標(biāo)簽頁(yè)關(guān)閉后就消失了）董瞻。
localStorage作用域是協(xié)議、主機(jī)名川队、端口力细。（理論上，不人為的刪除固额，一直存在設(shè)備中）
sessionStorage作用域是窗口眠蚂、協(xié)議、主機(jī)名斗躏、端口逝慧。
知道了這些知識(shí)點(diǎn)后，你的問(wèn)題就很好解決了啄糙。
localStorage是window上的笛臣。所以不需要寫this.localStorage，vue中如果寫this隧饼，是指vue實(shí)例沈堡。會(huì)報(bào)錯(cuò)
