隨著 Web 應(yīng)用程序的出現(xiàn)，也產(chǎn)生了在客戶端存儲(chǔ)用戶信息的要求，包括登錄信息，偏好設(shè)定或者其他數(shù)據(jù)?？蛻舳舜鎯?chǔ)包括 Cookie，Web存儲(chǔ)機(jī)制和 IndexedDB 等方式。
基本概念
Cookie 是小甜餅的意思，它確實(shí)很小，它的大小限制為4kb左右， 指某些網(wǎng)站為了辨別用戶身份而儲(chǔ)存在用戶本地終端（Client Side）上的數(shù)據(jù)（通常經(jīng)過加密），是為了解決 HTTP 無(wú)狀態(tài)的特性而出現(xiàn)的。
localStorage 是 HTML5 標(biāo)準(zhǔn)中新加入的技術(shù)。早在 IE 6 時(shí)代，就有一個(gè)叫 userData 的東西用于本地存儲(chǔ)，而當(dāng)時(shí)考慮到瀏覽器兼容性，更通用的方案是使用 Flash。而如今，localStorage 被大多數(shù)瀏覽器所支持。
sessionStorage 與 localStorage 的接口類似，但保存數(shù)據(jù)的生命周期與 localStorage 不同。做過后端開發(fā)的同學(xué)應(yīng)該知道 Session 這個(gè)詞的意思，直譯過來(lái)是“會(huì)話”。而 sessionStorage 是一個(gè)前端的概念，它只是可以將一部分?jǐn)?shù)據(jù)在當(dāng)前會(huì)話中保存下來(lái)，刷新頁(yè)面數(shù)據(jù)依舊存在。但當(dāng)頁(yè)面關(guān)閉后，sessionStorage 中的數(shù)據(jù)就會(huì)被清空。
三者的異同
| 特性 | Cookie | localStorage | sessionStorage |
|---|---|---|---|
| 生命周期 | 一般由服務(wù)器通過Set-Cookie字段生成，可設(shè)置失效時(shí)間。如果在瀏覽器端生成Cookie，默認(rèn)是關(guān)閉瀏覽器后失效 | 除非被清除，否則永久保存 | 僅在當(dāng)前會(huì)話下有效，關(guān)閉頁(yè)面或?yàn)g覽器后被清除（現(xiàn)代瀏覽器已經(jīng)具備了重新打開最近關(guān)閉的標(biāo)簽頁(yè)后恢復(fù)上次瀏覽會(huì)話的功能） |
| 存放數(shù)據(jù)大小 | 4kb左右（一般不超過4095字節(jié)） | 一般為5MB | 一般為5MB |
| 與服務(wù)器通信 | 每次都會(huì)攜帶在HTTP頭中，如果使用cookie保存過多數(shù)據(jù)會(huì)帶來(lái)性能問題 | 僅在客戶端（即瀏覽器）中保存，不參與和服務(wù)器的通信 | 僅在客戶端（即瀏覽器）中保存，不參與和服務(wù)器的通信 |
應(yīng)用場(chǎng)景
因?yàn)榭紤]到每個(gè) HTTP 請(qǐng)求都會(huì)帶著 Cookie 的信息，所以 Cookie 當(dāng)然是能精簡(jiǎn)就精簡(jiǎn)啦，比較常用的一個(gè)應(yīng)用場(chǎng)景就是判斷用戶是否登錄。針對(duì)登錄過的用戶，服務(wù)器端會(huì)在他登錄時(shí)往 Cookie 中插入一段加密過的唯一辨識(shí)單一用戶的辨識(shí)碼，下次只要讀取這個(gè)值就可以判斷當(dāng)前用戶是否登錄啦。
曾經(jīng)還使用 Cookie 來(lái)保存用戶在電商網(wǎng)站的購(gòu)物車信息，如今有了 localStorage，似乎在這個(gè)方面也可以給 Cookie 放個(gè)假了~
而另一方面 localStorage 接替了 Cookie 管理購(gòu)物車的工作，同時(shí)也能勝任其他一些工作。比如HTML5游戲通常會(huì)產(chǎn)生一些本地?cái)?shù)據(jù)，localStorage 也是非常適用的。
如果遇到一些內(nèi)容特別多的表單，為了優(yōu)化用戶體驗(yàn)，我們可能要把表單頁(yè)面拆分成多個(gè)子頁(yè)面，然后按步驟引導(dǎo)用戶填寫。這時(shí)候 sessionStorage 的作用就發(fā)揮出來(lái)了。
參考資料：
Web 前端實(shí)現(xiàn)本地存儲(chǔ)
淺談前端存儲(chǔ)
聊一聊前端存儲(chǔ)那些事兒
詳說(shuō) Cookie, LocalStorage 與 SessionStorage
Window.localStorage
Window.sessionStorage
HTTP cookies
