正常操作，正常分析，大家好，我是D1n910

本次要談是localStorage和sessionStorage，本地存儲(chǔ)和會(huì)話存儲(chǔ)，他們的作用都是把數(shù)據(jù)存儲(chǔ)到瀏覽器的內(nèi)存中。

假設(shè)你都知道localStorage和sessionStorage是什么，以及基本的方法。

1、為什么用localStorage/sessionStorage

網(wǎng)頁(yè)上的動(dòng)態(tài)數(shù)據(jù)信息一般都是來(lái)自后端服務(wù)器，通過(guò)這樣的方式動(dòng)態(tài)顯示數(shù)據(jù)，而不是一開(kāi)始全部傳過(guò)來(lái)，放到內(nèi)存中。

為什么要用到本地存儲(chǔ)，主要是為了功能需求。比如，后端服務(wù)器怎么知道這個(gè)嗶哩嗶哩頁(yè)面的使用者是【D1n910 UID 12324653 】而不是【碧詩(shī) UID 2】，可以通過(guò)每次請(qǐng)求后端的時(shí)候，告訴后端我是xxxx從而實(shí)現(xiàn)。以前的時(shí)候會(huì)用cookie，不過(guò)cookie存儲(chǔ)拿取數(shù)據(jù)不方便、不安全、裝得不夠多，所以選用了localStorage/sessionStorage

2、localStorage/sessionStorage 區(qū)別

在同一協(xié)議、同一主機(jī)名和同一端口下。

localStorage

可以在不同窗口之間獲取到localStorage數(shù)據(jù)。

清理方式：主動(dòng)清理

sessionStorage

在同窗口內(nèi)獲取到sessionStorage數(shù)據(jù)。

清理方式：主動(dòng)清理/關(guān)閉窗口

3、應(yīng)用

面對(duì)一些前端頁(yè)面的需求，比如一些神奇的交互。

針對(duì)【不同窗口下的需求】一般采用 localStorage。

舉個(gè)例子：【A窗口】展現(xiàn)過(guò)一個(gè)alert，那么【B窗口】不再展示alert。

那么就可以在【A窗口】展現(xiàn)過(guò)一個(gè)alert后，修改?localStorage 對(duì)應(yīng)的自定義標(biāo)示ifAlert為true，然后【B窗口】調(diào)用?localStorage 的?ifAlert，看到是 true，則可不進(jìn)行 alert。

再舉個(gè)最常見(jiàn)的例子，不同窗口ajax請(qǐng)求會(huì)帶上token去請(qǐng)求，【A窗口】請(qǐng)求刷新過(guò) token 后，【B窗口】想要共用同一個(gè) token，那么也是可以存到 locakStorage 里調(diào)用的。

針對(duì)【關(guān)掉窗口后就清理數(shù)據(jù)的需求】一般采用 sessionStorage。

比如還是上面的token例子，如果把 token 存到瀏覽器 localStorage 內(nèi)，那么可能機(jī)主關(guān)掉瀏覽器后，會(huì)被某黑客進(jìn)入，然后從緩存中獲取到 token 進(jìn)行使用。sessionStorage 則可以在關(guān)閉窗口后，清理對(duì)應(yīng)的數(shù)據(jù)內(nèi)容。