淺談cookie，sessionStorage和localStorage區別
在客戶端存儲數據可以使用的技術有如下四種：
-
Cookie技術：瀏覽器兼容性好，但操作比較復雜，需要程序員自己封裝，源生的Cookie接口不友好
-
H5 WebStorage：不能超過8MB，操作簡單；
-
IndexedDB：可存大量數據，還不是標準技術；
-
Flash存儲：依賴於Flash播放器，Adobe已宣布將放棄Flash,可以不再考慮此技術。
這裏主要討論cookie和WebStorage:
共同之處：Cookie和WebStorage都是用來跟蹤瀏覽器用戶身份的會話方式。
名詞解釋：Session：會話，瀏覽器從打開某個網站的一個頁面開始，中間可能打開很多頁面，直到關閉瀏覽器，整個過程稱為“瀏覽器與Web服務器的一次會話。
Cookie 是小甜餅的意思。顧名思義，cookie 確實非常小，它的大小限制為4KB左右，它的主要用途有保存登錄信息，比如你登錄某個網站市場可以看到“記住密碼”，這通常就是通過在 Cookie 中存入一段辨別用戶身份的數據來實現的。
WebStorage技術中，瀏覽器為用戶提供了兩個對象：
(1)window.sessionStorage：類數組對象，會話級數據存儲；
(2)window.localStorage：類數組對象，本地存儲(跨會話級存儲)；
sessionStorage，是在瀏覽器進程所分得的內存中存儲著一次Web會話可用的數據，可供此次會話中所有的頁面共同使用；瀏覽器一旦關閉就消失了。作用：在同一個會話中的所有頁面間共享數據。
localStorage是在瀏覽器所能管理的外存(硬盤)中存儲著用戶的瀏覽數據，可供此次會話以及後續的會話中的頁面共同使用，即使瀏覽器關閉也不會消失，可以說在本地電腦永久存在，除非JavaScript腳步刪除或者用戶主動清空瀏覽器緩存。作用：在當前客戶端所對應的所有會話中共享數據，如登錄用戶名。
sessionStorage有如下方法，localStorage同樣也可使用這些方法：
sessionStorage[key] = value //保存一個數據
sessionStorage.setItem(key, value) //保存一個數據
var v = sessionStorage[key] //讀取一個數據
var v = sessionStorage.getItem(key) //讀取一個數據
sessionStorage.removeItem(key) //刪除一個數據
sessionStorage.clear() //清除所有數據
sessionStorage.length //數據的數量
sessionStorage.key(i) //獲取第i個key
localStorage中若數據發生了修改，都會觸發一次window.onstorage事件，可以監聽此事件，實現監視localStorage數據改變的目的，用於在一個窗口中監視其它窗口中對localStorage數據的修改。但註意window.onstorage不能監視sessionStorage數據的修改！
應用場景
有了對上面這些差別的直觀理解，我們就可以討論三者的應用場景了。
因為考慮到每個 HTTP 請求都會帶著 Cookie 的信息，所以 Cookie 當然是能精簡就精簡啦，比較常用的一個應用場景就是判斷用戶是否登錄。針對登錄過的用戶，服務器端會在他登錄時往 Cookie 中插入一段加密過的唯一辨識單一用戶的辨識碼，下次只要讀取這個值就可以判斷當前用戶是否登錄啦。曾經還使用 Cookie 來保存用戶在電商網站的購物車信息，如今有了 localStorage，似乎在這個方面也可以給 Cookie 放個假了。
而另一方面 localStorage 接替了 Cookie 管理購物車的工作，同時也能勝任其他一些工作。比如HTML5遊戲通常會產生一些本地數據，localStorage 也是非常適用的。如果遇到一些內容特別多的表單，為了優化用戶體驗，我們可能要把表單頁面拆分成多個子頁面，然後按步驟引導用戶填寫。這時候 sessionStorage 的作用就發揮出來了。
安全性的考慮
需要註意的是，不是什麽數據都適合放在 Cookie、localStorage 和 sessionStorage 中的。使用它們的時候，需要時刻註意是否有代碼存在 XSS 註入的風險。因為只要打開控制臺，你就隨意修改它們的值，也就是說如果你的網站中有 XSS 的風險，它們就能對你的 localStorage 肆意妄為。所以千萬不要用它們存儲你系統中的敏感數據。
參考資料:
<<JavaScript高級程序設計>>
詳說 Cookie, LocalStorage 與 SessionStorage（https://segmentfault.com/a/1190000002723469）
淺談cookie，sessionStorage和localStorage區別