cookie

存儲(chǔ)在cookie中的數(shù)據(jù)，每次都會(huì)被瀏覽器自動(dòng)放在http請(qǐng)求中，如果這些數(shù)據(jù)并不是每個(gè)請(qǐng)求都需要發(fā)給服務(wù)端的數(shù)據(jù)，瀏覽器這設(shè)置自動(dòng)處理無(wú)疑增加了網(wǎng)絡(luò)開(kāi)銷；但如果這些數(shù)據(jù)是每個(gè)請(qǐng)求都需要發(fā)給服務(wù)端的數(shù)據(jù)（比如身份認(rèn)證信息），瀏覽器這設(shè)置自動(dòng)處理就大大免去了重復(fù)添加操作。 所以對(duì)于那設(shè)置“每次請(qǐng)求都要攜帶的信息（最典型的就是身份認(rèn)證信息）”就特別適合放在cookie中，其他類型的數(shù)據(jù)就不適合了。

1.最早的本地存儲(chǔ)方式，兼容性好

2.cookie優(yōu)點(diǎn)Cookie的大小為4kb。cookie主要應(yīng)用在保存用戶身份信息。

3.當(dāng)網(wǎng)頁(yè)要發(fā)http請(qǐng)求時(shí)，瀏覽器會(huì)先檢查是否有相應(yīng)的cookie，有則自動(dòng)添加在request header中的cookie字段中

4.cookie在每次請(qǐng)求中都會(huì)被發(fā)送，如果不使用 HTTPS并對(duì)其加密，其保存的信息很容易被竊取

locakStorage

1.HTML5新方法，IE8及以上瀏覽器都兼容

2.除非手動(dòng)清除，否則永久保存在瀏覽器

3.存儲(chǔ)大小一般為5MB

4.只存在于客戶端（瀏覽器）中，不參與和服務(wù)器的通信

5.相同瀏覽器的不同頁(yè)面間可以共享相同的 localStorage

6.不同瀏覽器無(wú)法共享localStorage或sessionStorage中的信息

sessionStorage

1 僅在當(dāng)前會(huì)話下有效，瀏覽器被關(guān)閉或當(dāng)前頁(yè)面被關(guān)閉的情況下清除

2 存儲(chǔ)大小一般為5MB

3 只存在于客戶端（瀏覽器）中，不參與和服務(wù)器的通信

4 api使用簡(jiǎn)單，可以直接拿來(lái)使用，也可自己封裝來(lái)對(duì)Object和Array有更好的支持

5 不同頁(yè)面或標(biāo)簽頁(yè)間無(wú)法共享sessionStorage的信息

6 不同瀏覽器無(wú)法共享localStorage或sessionStorage中的信息

indexedDB

1.indexedDB 是一個(gè)運(yùn)行在瀏覽器上的非關(guān)系型數(shù)據(jù)庫(kù),indexedDB支持多種數(shù)據(jù)格式，持久化存儲(chǔ)、支持事務(wù)、游標(biāo)、索引等數(shù)據(jù)庫(kù)操作,同時(shí)indexedDB的存儲(chǔ)空間大, 一般瀏覽器會(huì)分配50M-250M不等

2.異步 IndexedDB 操作時(shí)不會(huì)鎖死瀏覽器，用戶依然可以進(jìn)行其他操作，這與 LocalStorage 形成對(duì)比，后者的操作是同步的。異步設(shè)計(jì)是為了防止大量數(shù)據(jù)的讀寫，拖慢網(wǎng)頁(yè)的表現(xiàn)。

vuex的區(qū)別

1.區(qū)別：vuex存儲(chǔ)在內(nèi)存，localstorage（本地存儲(chǔ)）則以文件的方式存儲(chǔ)在本地,永久保存（不主動(dòng)刪除，則一直存在）；sessionstorage( 會(huì)話存儲(chǔ) ) ,臨時(shí)保存。localStorage和sessionStorage只能存儲(chǔ)字符串類型，對(duì)于復(fù)雜的對(duì)象可以使用ECMAScript提供的JSON對(duì)象的stringify和parse來(lái)處理

2.應(yīng)用場(chǎng)景：vuex用于組件之間的傳值，localstorage，sessionstorage則主要用于不同頁(yè)面之間的傳值。

3.永久性：當(dāng)刷新頁(yè)面（這里的刷新頁(yè)面指的是 --> F5刷新,屬于清除內(nèi)存了）時(shí)vuex存儲(chǔ)的值會(huì)丟失，sessionstorage頁(yè)面關(guān)閉后就清除掉了，localstorage不會(huì)。

注：大家可能覺(jué)得用localstorage可以代替vuex, 對(duì)于不變的數(shù)據(jù)確實(shí)可以，但是當(dāng)兩個(gè)組件共用一個(gè)數(shù)據(jù)源（對(duì)象或數(shù)組）時(shí)，如果其中一個(gè)組件改變了該數(shù)據(jù)源，希望另一個(gè)組件響應(yīng)該變化時(shí)，localstorage，sessionstorage無(wú)法做到，原因就是區(qū)別1。

在了解了上述的前端的緩存方式后，我們可以看看針對(duì)不對(duì)場(chǎng)景的使用選擇：

使用場(chǎng)景

標(biāo)記用戶與跟蹤用戶行為的情況，推薦使用cookie

適合長(zhǎng)期保存在本地的數(shù)據(jù)（令牌），推薦使用localStorage

敏感賬號(hào)一次性登錄，推薦使用sessionStorage

存儲(chǔ)大量數(shù)據(jù)的情況、在線文檔（富文本編輯器）保存編輯歷史的情況，推薦使用indexedDB

注意

數(shù)據(jù)與服務(wù)器之間的交互方式， cookie的數(shù)據(jù)會(huì)自動(dòng)的傳遞到服務(wù)器，服務(wù)器端也可以寫cookie到客戶端； sessionStorage和localStorage不會(huì)自動(dòng)把數(shù)據(jù)發(fā)給服務(wù)器，僅在本地保存