1.背景介紹

SessionStorage, LocalStorage, Cookie這三者都可以被用來(lái)在瀏覽器端存儲(chǔ)數(shù)據(jù)趾疚，而且都是字符串類(lèi)型的鍵值對(duì)奖蔓。 區(qū)別在于前兩者屬于WebStorage立膛，創(chuàng)建它們的目的便于客戶(hù)端存儲(chǔ)數(shù)據(jù)揪罕。 而Cookie早在網(wǎng)景公司的瀏覽器中就開(kāi)始支持，最初目的是為了保持HTTP的狀態(tài)宝泵。

2.知識(shí)剖析

COOKIE?

HTTP Cookie（也叫Web cookie或者瀏覽器Cookie）是服務(wù)器發(fā)送到用戶(hù)瀏覽器并保存在瀏覽器上的一塊數(shù)據(jù)好啰，它會(huì)在瀏覽器下一次發(fā)起請(qǐng)求時(shí)被攜帶并發(fā)送到服務(wù)器上。比較經(jīng)典的儿奶，可以它用來(lái)確定兩次請(qǐng)求是否來(lái)自于同一個(gè)瀏覽器框往，從而能夠確認(rèn)和保持用戶(hù)的登錄狀態(tài)。Cookie的使用使得基于無(wú)狀態(tài)的HTTP協(xié)議上記錄穩(wěn)定的狀態(tài)信息成為了可能闯捎。

SESSIONSTORAGE

sessionStorage 屬性允許你訪(fǎng)問(wèn)一個(gè) session Storage 對(duì)象椰弊。它與 localStorage 相似许溅，不同之處在于 localStorage 里面存儲(chǔ)的數(shù)據(jù)沒(méi)有過(guò)期時(shí)間設(shè)置，而存儲(chǔ)在 sessionStorage 里面的數(shù)據(jù)在頁(yè)面會(huì)話(huà)結(jié)束時(shí)會(huì)被清除秉版。頁(yè)面會(huì)話(huà)在瀏覽器打開(kāi)期間一直保持贤重，并且重新加載或恢復(fù)頁(yè)面仍會(huì)保持原來(lái)的頁(yè)面會(huì)話(huà)。在新標(biāo)簽或窗口打開(kāi)一個(gè)頁(yè)面會(huì)初始化一個(gè)新的會(huì)話(huà)清焕，這點(diǎn)和 session cookies 的運(yùn)行方式不同游桩。

LOCALSTORAGE

localStorage 屬性允許你訪(fǎng)問(wèn)一個(gè) local Storage 對(duì)象。localStorage 與 sessionStorage 相似耐朴。不同之處在于借卧，存儲(chǔ)在 localStorage 里面的數(shù)據(jù)沒(méi)有過(guò)期時(shí)間（expiration time），而存儲(chǔ)在 sessionStorage 里面的數(shù)據(jù)會(huì)在瀏覽器會(huì)話(huà)（browsing session）結(jié)束時(shí)被清除筛峭，即瀏覽器關(guān)閉時(shí)铐刘。

3.常見(jiàn)問(wèn)題

問(wèn)題：COOKIE是如何工作的？

Cookie可用于客戶(hù)端數(shù)據(jù)的存儲(chǔ)影晓，在沒(méi)有其它存儲(chǔ)辦法時(shí)捂襟，使用這種方式是可行的，但隨著現(xiàn)在瀏覽器開(kāi)始支持各種各樣的存儲(chǔ)方式而逐漸被廢棄场躯。 由于服務(wù)器指定Cookie以后瀏覽器的每次請(qǐng)求都會(huì)攜帶Cookie數(shù)據(jù)凯力，這會(huì)帶來(lái)額外的性能負(fù)擔(dān)（尤其是在移動(dòng)環(huán)境下）。 新的瀏覽器API已經(jīng)允許開(kāi)發(fā)者直接在本地存儲(chǔ)數(shù)據(jù)饵婆，如可以使用Web storage API （本地存儲(chǔ)和會(huì)話(huà)存儲(chǔ)）和IndexedDB（索引數(shù)據(jù)庫(kù)）勺馆。

COOKIE主要用在以下三個(gè)方面:

會(huì)話(huà)狀態(tài)管理（如用戶(hù)登錄狀態(tài)、購(gòu)物車(chē)）

個(gè)性化設(shè)置（如用戶(hù)自定義設(shè)置）

瀏覽器行為跟蹤（如跟蹤分析用戶(hù)行為）

COOKIE的缺陷

每個(gè) HTTP 請(qǐng)求中都包含 Cookies侨核，從而導(dǎo)致傳輸相同的數(shù)據(jù)減緩我們的 Web 應(yīng)用程序草穆。

每個(gè) HTTP 請(qǐng)求中都包含 Cookies，從而導(dǎo)致發(fā)送未加密的數(shù)據(jù)到互聯(lián)網(wǎng)上搓译，可能會(huì)導(dǎo)致數(shù)據(jù)泄露悲柱，雖然進(jìn)行過(guò)加密，但是攻擊者拿到cookie后仍然可以登錄些己，因?yàn)殡y以識(shí)別是否為同一個(gè)用戶(hù)在登陸豌鸡。（除非用HTTPS）

Cookies 只能存儲(chǔ)有限的 4KB 數(shù)據(jù)，對(duì)于復(fù)雜的存儲(chǔ)需求來(lái)說(shuō)是不夠用的段标。

OCALSTORAGE和SESSIONSTORAGE?

html5中的Web Storage包括了兩種存儲(chǔ)方式：sessionStorage和localStorage涯冠。 不會(huì)被發(fā)送到服務(wù)器上。同時(shí)空間比Cookie大很多怀樟，一般支持5-10M功偿。 與Cookie類(lèi)似，每個(gè)域名下會(huì)有不同的localStorage和SessionStorage實(shí)例

sessionStorage用于本地存儲(chǔ)一個(gè)會(huì)話(huà)（session）中的數(shù)據(jù)，這些數(shù)據(jù)只有在同一個(gè)會(huì)話(huà)中的頁(yè)面才能訪(fǎng)問(wèn)并且當(dāng)會(huì)話(huà)結(jié)束后（關(guān)閉標(biāo)簽頁(yè)械荷，不包括刷新和跳轉(zhuǎn)） 數(shù)據(jù)也隨之銷(xiāo)毀共耍。因此sessionStorage不是一種持久化的本地存儲(chǔ)，僅僅是會(huì)話(huà)級(jí)別的存儲(chǔ)吨瞎。

localStorage可以在多個(gè)標(biāo)簽頁(yè)中互相訪(fǎng)問(wèn)用于持久化的本地存儲(chǔ)痹兜，可以在多個(gè)標(biāo)簽頁(yè)中互相訪(fǎng)問(wèn),除非主動(dòng)刪除數(shù)據(jù)，否則數(shù)據(jù)是永遠(yuǎn)不會(huì)過(guò)期的颤诀。

注意SessionStorage中的Session指的是瀏覽器會(huì)話(huà)字旭，而非服務(wù)器端通過(guò)Cookie實(shí)現(xiàn)的Session。

STORAGE的使用

LocalStorage/SessionStorage也是基于字符串的鍵值對(duì)存儲(chǔ)崖叫∫糯荆可以通過(guò)setItem，getItem,clear,removeIteml來(lái)存取控制數(shù)據(jù)：

clear()：刪除所有值心傀。

getItem(name)：根據(jù)指定的名字name獲取對(duì)應(yīng)的值

key(index)：在指定的數(shù)字位置獲取該位置的名字屈暗。

removeItem(name)：刪除由name指定的名值對(duì)

setItem(name,value)：為指定名字設(shè)置一個(gè)對(duì)應(yīng)的值

localStorage.setItem("name","wangerxiao");?//這樣就用localStorage存儲(chǔ)了一個(gè)名字為name的數(shù)據(jù)，數(shù)據(jù)的內(nèi)容為 “wangerxiao"?localStorage.getItem("name");?//這樣就讀取了名字為“name”的數(shù)據(jù)的值脂男。

但是养叛，storage只能存儲(chǔ)字符串的數(shù)據(jù)，對(duì)于JS中常用的數(shù)組或?qū)ο髤s不能直接存儲(chǔ)宰翅。

var obj = { name:'Jim'?};?sessionStorage.obj = obj;?localStorage.obj = obj;?var arr = [1,2,3];?sessionStorage.obj = arr;?localStorage.obj = arr;

但我們可以通過(guò)JSON對(duì)象提供的parse和stringify將其他數(shù)據(jù)類(lèi)型轉(zhuǎn)化成字符串弃甥，再存儲(chǔ)到storage中就可以了。

var obj = { name:'Jim'?};?var?str?= JSON.stringify(obj);?//存入?sessionStorage.obj =?str;?//讀取?str?= sessionStorage.obj;?//重新轉(zhuǎn)換為對(duì)象?obj = JSON.parse(str);

4.擴(kuò)展思考

總結(jié)：SESSIONSTORAGE 汁讼、LOCALSTORAGE 和 COOKIE 之間的異同

共同點(diǎn)：都是保存在瀏覽器端淆攻，且同源的。

不同點(diǎn)：

1.cookie數(shù)據(jù)始終在同源的http請(qǐng)求中攜帶（即使不需要）掉缺，即cookie在瀏覽器和服務(wù)器間來(lái)回傳遞卜录。 而sessionStorage和localStorage不會(huì)自動(dòng)把數(shù)據(jù)發(fā)給服務(wù)器，僅在本地保存眶明。cookie數(shù)據(jù)還有路徑（path）的概念，可以限制cookie只屬于某個(gè)路徑下筐高。

2.存儲(chǔ)大小限制也不同搜囱，cookie數(shù)據(jù)不能超過(guò)4k，同時(shí)因?yàn)槊看蝖ttp請(qǐng)求都會(huì)攜帶cookie柑土，所以cookie只適合保存很小的數(shù)據(jù)蜀肘，如會(huì)話(huà)標(biāo)識(shí)。 sessionStorage和localStorage 雖然也有存儲(chǔ)大小的限制稽屏，但比cookie大得多扮宠，可以達(dá)到5M或更大。

3.數(shù)據(jù)有效期不同狐榔，sessionStorage：僅在當(dāng)前瀏覽器窗口關(guān)閉前有效坛增，自然也就不可能持久保持获雕；localStorage：始終有效，窗口或?yàn)g覽器關(guān)閉也一直保存收捣，因此用作持久數(shù)據(jù)届案； cookie只在設(shè)置的cookie過(guò)期時(shí)間之前一直有效，即使窗口或?yàn)g覽器關(guān)閉罢艾。

4.作用域不同楣颠，sessionStorage不在不同的瀏覽器窗口中共享，即使是同一個(gè)頁(yè)面咐蚯；localStorage 在所有同源窗口中都是共享的童漩；cookie也是在所有同源窗口中都是共享的。

5.Web Storage 支持事件通知機(jī)制春锋，可以將數(shù)據(jù)更新的通知發(fā)送給監(jiān)聽(tīng)者睁冬。

6.Web Storage 的 api 接口使用更方便。

5.參考文獻(xiàn)

參考謝燦勇的博客

參考使用sessionStorage看疙、localStorage存儲(chǔ)數(shù)組與對(duì)象

參考請(qǐng)描述一下 cookies豆拨，sessionStorage 和 localStorage 的區(qū)別？

6.更多討論

1.localStorage是否可以在同源窗口共享

答：localStorage可以同源窗口共享能庆。

2.sessionStroage應(yīng)用場(chǎng)景施禾？

答：在不需要和服務(wù)器交互的場(chǎng)所，用來(lái)存儲(chǔ)用戶(hù)數(shù)據(jù)之類(lèi)的搁胆，可以在路由頁(yè)跳轉(zhuǎn)的時(shí)候取出更改儲(chǔ)存弥搞，減少調(diào)用接口的次數(shù)，減輕服務(wù)器壓力渠旁。

3.用storage怎么來(lái)判斷用戶(hù)是否需要再登陸攀例？

可以用加密的方法存儲(chǔ)，每次用戶(hù)訪(fǎng)問(wèn)的時(shí)候可以取出調(diào)用服務(wù)器接口作為參數(shù)發(fā)送進(jìn)行對(duì)比顾腊，存在賬號(hào)密碼就直接跳過(guò)登錄頁(yè)粤铭。