本文最初發布于我的個人博客：咀嚼之味

?

最近在找暑期實習，其中百度、網易游戲、阿里的面試都問到一些關于HTML5的東西，問題大多是這樣開頭的：“你用過什么HTML5的技術呀？” 而后，每次都能扯到 Cookie 和 localStorage 有啥差別。這篇文章就旨在詳細地闡述這部分內容，而具體 Web Storage API 的使用可以參考MDN的文檔，就不在這篇文章中贅述了。

?

基本概念

Cookie

Cookie 是小甜餅的意思。顧名思義，cookie 確實非常小，它的大小限制為4KB左右，是網景公司的前雇員 Lou Montulli 在1993年3月的發明。它的主要用途有保存登錄信息，比如你登錄某個網站市場可以看到“記住密碼”，這通常就是通過在 Cookie 中存入一段辨別用戶身份的數據來實現的。

localStorage

localStorage 是 HTML5 標準中新加入的技術，它并不是什么劃時代的新東西。早在 IE 6 時代，就有一個叫 userData 的東西用于本地存儲，而當時考慮到瀏覽器兼容性，更通用的方案是使用 Flash。而如今，localStorage 被大多數瀏覽器所支持，如果你的網站需要支持 IE6+，那以 userData 作為你的 polyfill 的方案是種不錯的選擇。

特性ChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)

localStorage	4	3.5	8	10.50	4
sessionStorage	5	2	8	10.50	4

sessionStorage

sessionStorage 與 localStorage 的接口類似，但保存數據的生命周期與 localStorage 不同。做過后端開發的同學應該知道 Session 這個詞的意思，直譯過來是“會話”。而 sessionStorage 是一個前端的概念，它只是可以將一部分數據在當前會話中保存下來，刷新頁面數據依舊存在。但當頁面關閉后，sessionStorage 中的數據就會被清空。

?

三者的異同

特性CookielocalStoragesessionStorage

數據的生命期	可設置失效時間，默認是關閉瀏覽器后失效	除非被清除，否則永久保存	僅在當前會話下有效，關閉頁面或瀏覽器后被清除
存放數據大小	4K左右	一般為5MB
與服務器端通信	每次都會攜帶在HTTP頭中，如果使用cookie保存過多數據會帶來性能問題	僅在客戶端（即瀏覽器）中保存，不參與和服務器的通信
易用性	需要程序員自己封裝，源生的Cookie接口不友好	源生接口可以接受，亦可再次封裝來對Object和Array有更好的支持

?

應用場景

有了對上面這些差別的直觀理解，我們就可以討論三者的應用場景了。

因為考慮到每個 HTTP 請求都會帶著 Cookie 的信息，所以 Cookie 當然是能精簡就精簡啦，比較常用的一個應用場景就是判斷用戶是否登錄。針對登錄過的用戶，服務器端會在他登錄時往 Cookie 中插入一段加密過的唯一辨識單一用戶的辨識碼，下次只要讀取這個值就可以判斷當前用戶是否登錄啦。曾經還使用 Cookie 來保存用戶在電商網站的購物車信息，如今有了 localStorage，似乎在這個方面也可以給 Cookie 放個假了~

而另一方面 localStorage 接替了 Cookie 管理購物車的工作，同時也能勝任其他一些工作。比如HTML5游戲通常會產生一些本地數據，localStorage 也是非常適用的。如果遇到一些內容特別多的表單，為了優化用戶體驗，我們可能要把表單頁面拆分成多個子頁面，然后按步驟引導用戶填寫。這時候 sessionStorage 的作用就發揮出來了。

?

安全性的考慮

需要注意的是，不是什么數據都適合放在 Cookie、localStorage 和 sessionStorage 中的。使用它們的時候，需要時刻注意是否有代碼存在 XSS 注入的風險。因為只要打開控制臺，你就隨意修改它們的值，也就是說如果你的網站中有 XSS 的風險，它們就能對你的 localStorage 肆意妄為。所以千萬不要用它們存儲你系統中的敏感數據。

?

參考資料

• what is the difference between localStorage, sessionStorage, session and cookie?
• HTML5 localStorage security
• 維基百科 - Cookie
• Web Storage API
• 瀏覽器本地數據（sessionStorage、localStorage、cookie）與server端數據
• HTMl5的sessionStorage和localStorage
• HTML5 LocalStorage 本地存儲

轉載于:https://www.cnblogs.com/jerryzou/p/4472670.html

《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀

總結

以上是生活随笔為你收集整理的详说 Cookie, LocalStorage 与 SessionStorage的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。