前端本地存儲(chǔ)的三種方式： localStorage? sessionStorage cookie
? ?一、localStorage?
? ? ? ? 生命周期：永久? （不手動(dòng)清楚 存儲(chǔ)的數(shù)據(jù)就一直存在）
? ? ? ? 存儲(chǔ)大小:5M
? ??????存儲(chǔ)的數(shù)據(jù)數(shù)據(jù)類(lèi)型：string
? ? ? ? 方法(API)：保存數(shù)據(jù)：localStorage.setItem(key,value)? 獲取數(shù)據(jù)：localStorage.getItem(key,value)? ?刪除所有數(shù)據(jù)：localStorage.clear ()? ?刪除某個(gè)存儲(chǔ)的值：localStorage.removeItem(key)? ?存儲(chǔ)的數(shù)據(jù)長(zhǎng)度：localStorage.length? ?獲取某個(gè)索引的key:?localStorage.key(index)
二、sessionStorage
? ? ? ? 生命周期：瀏覽器關(guān)閉前，即關(guān)閉瀏覽器 sessionStorage里存儲(chǔ)的數(shù)據(jù)就被清除
? ? ? ? 存儲(chǔ)大?。?M
? ? ? ? 存儲(chǔ)的數(shù)據(jù)數(shù)據(jù)類(lèi)型：string
? ???????方法(API)：保存數(shù)據(jù)：sessionStorage.setItem(key,value)? 獲取數(shù)據(jù)：sessionStorage.getItem(key,value)? ?刪除所有數(shù)據(jù)：sessionStorage.clear ()? ?刪除某個(gè)存儲(chǔ)的值：sessionStorage.removeItem(key)? ? 存儲(chǔ)的數(shù)據(jù)長(zhǎng)度：sessionStorage.length? 獲取某個(gè)索引的key:? sessionStorage.key(index)
三、cookie
? ? ? ? 生命周期：默認(rèn)cookie的有效時(shí)間為瀏覽器關(guān)閉前? ? 也可以手動(dòng)設(shè)置cookie的有效時(shí)間
? ? ? ? 存儲(chǔ)大?。?KB
? ? ? ? 存儲(chǔ)的數(shù)據(jù)數(shù)據(jù)類(lèi)型：string
使用插件來(lái)使用cookie? ?js-cookie? ?
? ? ? ? 使用 安裝：npm i js-cookie? ?引入：import Cookie from 'js-cookie'? ? ? ? API：設(shè)置：Cookie.set(key,value,{}) [第三個(gè)參數(shù)為其他配置 為一個(gè)對(duì)象 可配置cookie的有效時(shí)間(expires:7表示該數(shù)據(jù)有效期為七天?expires可以是Number或者Date實(shí)例對(duì)象 傳入Number時(shí)表示天數(shù) Date實(shí)例可以指定任何時(shí)刻?如果給這個(gè)值Expire設(shè)置為0或者負(fù)值，那么這樣的設(shè)置就是在關(guān)閉瀏覽器時(shí)，就會(huì)清除cookie ) 路徑(path:"/' 指定該cookie可見(jiàn)路徑 注：指定了路徑以后 刪除cookie時(shí)也要帶上path路勁才能刪除成功) httpOnly:true 設(shè)置該屬性為不允許客戶(hù)端訪問(wèn)該cookie 防止被xxs攻擊 提高安全性? ? sceure：true? 設(shè)置該屬性意思為只有在https協(xié)議下訪問(wèn) 瀏覽器才會(huì)發(fā)送該cookie? ?SameSite屬性 該屬性表示跨域請(qǐng)求時(shí)是否攜帶cookie 該屬性有三個(gè)值：Strict ：完全禁止第三方cookie? Lax規(guī)則稍稍放寬，大多數(shù)情況也是不發(fā)送第三方Cookie，但是導(dǎo)航到目標(biāo)網(wǎng)址的 Get 請(qǐng)求除外 。Chrome 計(jì)劃將Lax變?yōu)槟J(rèn)設(shè)置 這時(shí)，網(wǎng)站可以選擇顯式關(guān)閉SameSite屬性，將其設(shè)為None。不過(guò)，前提是必須同時(shí)設(shè)置Secure屬性（Cookie 只能通過(guò) HTTPS 協(xié)議發(fā)送），否則無(wú)效]? ? 獲?。篊ookie.get(key)? ? 刪除：Cookie.remove(key)
四、localStorage sessionStorage cookie三者之間的區(qū)別
? ? localStorage和sessionStorage 都是存儲(chǔ)在客戶(hù)端(即瀏覽器) 不與服務(wù)器進(jìn)行交互通訊 sessionStorage為會(huì)話(huà)存儲(chǔ) 生命周期到關(guān)閉瀏覽器前有效 而且不同頁(yè)面(不同的瀏覽器窗口)或標(biāo)簽之間無(wú)法共享sessionStorage數(shù)據(jù) localStorage為永久存儲(chǔ) 同一瀏覽器內(nèi)數(shù)據(jù)皆可共享 需手動(dòng)刪除 不然一直存在 cookie是存儲(chǔ)在用戶(hù)本地終端的數(shù)據(jù) 可以設(shè)置有效期 cookie一般會(huì)在發(fā)生請(qǐng)求的時(shí)候攜帶在請(qǐng)求頭中? 有個(gè)數(shù)的限制 一般超過(guò)二十個(gè)??
1.?無(wú)論數(shù)據(jù)存儲(chǔ)在?localStorage?還是?sessionStorage?，它們都特定于頁(yè)面的協(xié)議
2.?Storage在新標(biāo)簽或窗口打開(kāi)一個(gè)頁(yè)面時(shí)會(huì)復(fù)制頂級(jí)瀏覽會(huì)話(huà)的上下文作為新會(huì)話(huà)的上下文，這點(diǎn)和?cookies?的運(yùn)行方式不同。
3.?打開(kāi)多個(gè)相同的URL的Tabs頁(yè)面，會(huì)創(chuàng)建各自的sessionStorage，而localStorage?屬性是一個(gè)可被用于訪問(wèn)當(dāng)前源（?origin?）的本地存儲(chǔ)空間的?Storage?對(duì)象（即localStorage共用同一個(gè)源的Storage?對(duì)象）。
###?特殊場(chǎng)景：登錄信息token存放sessionStorage
同一瀏覽器，同一域名，不同tab窗口：
tab1:?已登錄
復(fù)制域名到tab2，自動(dòng)登錄
tab2退出登錄，再重新登錄
復(fù)制域名到tab1
結(jié)果：tab1不會(huì)自動(dòng)登錄
原因：sessionStorage并不共享狀態(tài)，tab2重新登錄導(dǎo)致tab1的舊token已失效
結(jié)論：不建議將登錄信息存放Storage，而是存放有httponly和secure的cookie
（個(gè)人原以為復(fù)制了新的tab2的信息到tab1上會(huì)可以自動(dòng)登錄 因?yàn)橐詾閺?fù)制了新的信息重新存儲(chǔ)? 但是其實(shí)tab1的token已存在[過(guò)期] tab2的復(fù)制過(guò)去不會(huì)修改到tab1原有的token 但是如果復(fù)制到一個(gè)新打開(kāi)的窗口就會(huì)自動(dòng)登錄 當(dāng)前會(huì)從新開(kāi)啟新的會(huì)話(huà)存儲(chǔ)）
五、參考文獻(xiàn)
? ??前端本地存儲(chǔ)（Cookie、LocalStorage、SessionStorage）
