詳說 Cookie, LocalStorage 與 SessionStorage

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

最近在找暑期實習，其中百度、網易遊戲、阿里的面試都問到一些關於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 的方案是種不錯的選擇。

特性	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari (WebKit)
localStorage	4	3.5	8	10.50	4
sessionStorage	5	2	8	10.50	4

sessionStorage

sessionStorage 與 localStorage 的接口相似，但保存數據的生命週期與 localStorage 不一樣。作事後端開發的同窗應該知道 Session 這個詞的意思，直譯過來是「會話」。而 sessionStorage 是一個前端的概念，它只是能夠將一部分數據在當前會話中保存下來，刷新頁面數據依舊存在。但當頁面關閉後，sessionStorage 中的數據就會被清空。

三者的異同

特性	Cookie	localStorage	sessionStorage
數據的生命期	可設置失效時間，默認是關閉瀏覽器後失效	除非被清除，不然永久保存	僅在當前會話下有效，關閉頁面或瀏覽器後被清除
存放數據大小	4K左右	通常爲5MB	通常爲5MB
與服務器端通訊	每次都會攜帶在HTTP頭中，若是使用cookie保存過多數據會帶來性能問題	僅在客戶端（即瀏覽器）中保存，不參與和服務器的通訊	僅在客戶端（即瀏覽器）中保存，不參與和服務器的通訊
易用性	須要程序員本身封裝，源生的Cookie接口不友好	源生接口能夠接受，亦可再次封裝來對Object和Array有更好的支持	源生接口能夠接受，亦可再次封裝來對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 本地存儲