一、概念

1. Cookie 的大小限制為4KB左右，是網景公司的前僱員 Lou Montulli 在1993年3月的發明。它的主要用途有儲存登入資訊，比如你登入某個網站市場可以看到“記住密碼”，這通常就是通過在 Cookie 中存入一段辨別使用者身份的資料來實現的。

2. localStorage 是 HTML5 標準中新加入的技術，它並不是什麼劃時代的新東西。早在 IE 6 時代，就有一個叫 userData 的東西用於本地儲存，而當時考慮到瀏覽器相容性，更通用的方案是使用 Flash。

3. sessionStorage 與 localStorage 的介面類似，但儲存資料的生命週期與 localStorage 不同。做過後端開發的同學應該知道 Session 這個詞的意思，直譯過來是“會話”。而 sessionStorage 是一個前端的概念，它只是可以將一部分資料在當前會話中儲存下來，重新整理頁面資料依舊存在。但當頁面關閉後，sessionStorage 中的資料就會被清空。

二、區別

Cookie可設定失效時間，預設是關閉瀏覽器後失效；大小是4k；每次都會攜帶在HTTP頭中，如果使用cookie儲存過多資料會帶來效能問題；需要自己封裝，源生的Cookie介面不友好。

localStorage除非被清除，否則永久儲存；大小為5MB；僅在客戶端（即瀏覽器）中儲存，不參與和伺服器的通訊；API使用方便。

sessionStorage僅在當前會話下有效，關閉頁面或瀏覽器後被清除；大小為5MB；僅在客戶端（即瀏覽器）中儲存，不參與和伺服器的通訊；使用方法同localStroage。

三、應用

由於cookie每次http請求都會攜帶，一般使用者儲存一些關鍵性資訊，比如token，uid等，localStorage可以當做本地儲存來使用，但是需要注意的是瀏覽器隱私模式下是無法讀取的，也不會被爬蟲讀取，如果不手動刪除是一直存在的，而sessionStorage的有效期只是網頁在瀏覽器開啟到關閉的時間段。

tips：隱私模式下可以採用window.name模擬sessionStorage的方式處理，因為window.name是可做儲存的，這個也是其解決跨域方案的原因。