基本概念 Cookie Cookie 是小甜餅的意思。顧名思義，cookie 確實非常小，它的大小限製為4KB左右。它的主要用途有保存登錄信息，比如你登錄某個網站市場可以看到“記住密碼”，這通常就是通過在 Cookie 中存入一段辨別用戶身份的數據來實現的。 localStorage localSt ...
基本概念
Cookie
Cookie 是小甜餅的意思。顧名思義，cookie 確實非常小，它的大小限製為4KB左右。它的主要用途有保存登錄信息，比如你登錄某個網站市場可以看到“記住密碼”，這通常就是通過在 Cookie 中存入一段辨別用戶身份的數據來實現的。
localStorage
localStorage 是 HTML5 標準中新加入的技術，它並不是什麼劃時代的新東西。早在 IE 6 時代，就有一個叫 userData 的東西用於本地存儲，而當時考慮到瀏覽器相容性，更通用的方案是使用 Flash。而如今，localStorage 被大多數瀏覽器所支持，如果你的網站需要支持 IE6+，那以 userData 作為你的 polyfill 的方案是種不錯的選擇。
sessionStorage
sessionStorage 與 localStorage 的介面類似，但保存數據的生命周期與 localStorage 不同。做過後端開發的同學應該知道 Session 這個詞的意思，直譯過來是“會話”。而 sessionStorage 是一個前端的概念，它只是可以將一部分數據在當前會話中保存下來，刷新頁面數據依舊存在。但當頁面關閉後，sessionStorage 中的數據就會被清空。
三者的異同
| 特性 | Cookie | localStorage | sessionStorage |
|---|---|---|---|
| 數據的生命期 | 一般由伺服器生成，可設置失效時間。如果在瀏覽器端生成Cookie，預設是關閉瀏覽器後失效 | 除非被清除，否則永久保存 | 僅在當前會話下有效，關閉頁面或瀏覽器後被清除 |
| 存放數據大小 | 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 肆意妄為。所以千萬不要用它們存儲你系統中的敏感數據。
localStorage和sessionStorage操作
localStorage和sessionStorage都具有相同的操作方法，例如setItem、getItem和removeItem等
localStorage和sessionStorage的方法
setItem存儲value
用途：將value存儲到key欄位
sessionStorage.setItem("key", "value"); localStorage.setItem("site", "js8.in");
getItem獲取value
用途：獲取指定key本地存儲的值
var value = sessionStorage.getItem("key"); var site = localStorage.getItem("site");
removeItem刪除key
用途：刪除指定key本地存儲的值
sessionStorage.removeItem("key"); localStorage.removeItem("site");
clear清除所有的key/value
用途：清除所有的key/value
sessionStorage.clear(); localStorage.clear();
其他操作方法：點操作和[ ]
web Storage不但可以用自身的setItem,getItem等方便存取，也可以像普通對象一樣用點(.)操作符，及[]的方式進行數據存儲，像如下的代碼：
var storage = window.localStorage; storage.key1 = "hello"; storage["key2"] = "world"; console.log(storage.key1); console.log(storage["key2"]);
localStorage和sessionStorage的key和length屬性實現遍歷
sessionStorage和localStorage提供的key()和length可以方便的實現存儲的數據遍歷，例如下麵的代碼：
var storage = window.localStorage; for(var i=0, len=storage.length; i<len;i++){ var key = storage.key(i); var value = storage.getItem(key); console.log(key + "=" + value); }
出處：https://www.cnblogs.com/minigrasshopper/p/8064367.html
