一、基本概念
1.Cookie
Cookie 顧名思義小餅干崇呵，它非常小缤剧，儲存空間限制在4kb左右,它的主要用途有保存登錄信息，比如你登錄某個網站市場可以看到“記住密碼”域慷，這通常就是通過在 Cookie 中存入一段辨別用戶身份的數據來實現(xiàn)的
2.sessionStorage
sessionStorage 與 localStorage 的接口類似荒辕，但保存數據的生命周期與 localStorage 不同。做過后端開發(fā)的同學應該知道 Session 這個詞的意思犹褒，直譯過來是“會話”抵窒。而 sessionStorage 是一個前端的概念，它只是可以將一部分數據在當前會話中保存下來叠骑，刷新頁面數據依舊存在李皇。但當頁面關閉后，sessionStorage 中的數據就會被清空宙枷。
3.localStorage
localStorage 是 HTML5 標準中新加入的技術掉房，它并不是什么劃時代的新東西。早在 IE 6 時代慰丛，就有一個叫 userData 的東西用于本地存儲圃阳，而當時考慮到瀏覽器兼容性，更通用的方案是使用 Flash璧帝。而如今，localStorage 被大多數瀏覽器所支持富寿，如果你的網站需要支持 IE6+睬隶，那以 userData 作為你的 polyfill 的方案是種不錯的選擇锣夹。
二、三者的異同
1.生命周期
cookie:一般由服務器產生苏潜，可設置失效時間银萍，如果是瀏覽器產生的，則默認關閉瀏覽器時失效恤左。
sessionStorage：僅在當前會話有效贴唇，關閉當前頁面或者瀏覽器后當即清除。
localStorage：除非主動清除飞袋，否則永久保存戳气。
2.存放數據大小
cookie一般4kb左右，而sessionStorage和localStorage儲存空間相對較大巧鸭，一般5Mb瓶您。
3.與服務器通訊
cookie每次都會都會攜帶在http頭中，如果使用cookie儲存過多數據纲仍，會帶來影響性能等問題呀袱。
sessionStorage和localStorage僅保存在客戶端（瀏覽器）中，不參與通訊郑叠。
4.易用性
cookie：需要程序員自己封裝夜赵，原生的cookie接口不友好。
sessionStorage和localStorage：源生接口可以接受乡革，亦可再次封裝來對Object和Array有更好的支持寇僧。
三、應用場景
了解三者的差異性署拟，便可以了解它們的應用場景了婉宰。
cookie：因為考慮到每個 HTTP 請求都會帶著 Cookie 的信息，所以 Cookie 當然是能精簡就精簡啦推穷，比較常用的一個應用場景就是判斷用戶是否登錄心包。針對登錄過的用戶，服務器端會在他登錄時往 Cookie 中插入一段加密過的唯一辨識單一用戶的辨識碼馒铃，下次只要讀取這個值就可以判斷當前用戶是否登錄啦蟹腾。曾經還使用 Cookie 來保存用戶在電商網站的購物車信息，如今有了 localStorage区宇，似乎在這個方面也可以給 Cookie 放個假了~
而另一方面 localStorage 接替了 Cookie 管理購物車的工作娃殖，同時也能勝任其他一些工作。比如HTML5游戲通常會產生一些本地數據议谷，localStorage 也是非常適用的炉爆。如果遇到一些內容特別多的表單，為了優(yōu)化用戶體驗，我們可能要把表單頁面拆分成多個子頁面芬首，然后按步驟引導用戶填寫赴捞。這時候 sessionStorage 的作用就發(fā)揮出來了。
四郁稍、安全性的考慮
需要注意的是赦政，不是什么數據都適合放在 Cookie、localStorage 和 sessionStorage 中的耀怜。使用它們的時候恢着，需要時刻注意是否有代碼存在 XSS 注入的風險。因為只要打開控制臺财破，你就隨意修改它們的值掰派，也就是說如果你的網站中有 XSS 的風險，它們就能對你的 localStorage 肆意妄為狈究。所以千萬不要用它們存儲你系統(tǒng)中的敏感數據碗淌。
五、sessionStorage和localStorage的操作抖锥。
localStorage和sessionStorage都具有相同的操作方法亿眠，例如setItem、getItem和removeItem等磅废。
localStorage和sessionStorage的方法纳像。
儲存數據 setItem()
將數據儲存到key字段
sessionStorage.setItem("key","value"); localSotrage.setItem("key","value");
//注意：兩者存儲數據方法一致
獲取數據 getItem()
獲取指定儲存指定字段key的數據
var value = sessionStorage.getItem(“key”); var value = localStorage.getItem("key");
移除指定數據 removeItem()
刪除指定儲存字段key的數據
sessionStorage.removeItem("key"); localStorage.removeItem("key");
清除所有儲存數據 clear()
清除所有的value/key
sessionStorage.clear(); localStorage.clear();
其他操作方法
點操作和[]
localStorage還有 . 和 [] 寫入值得方法，如下
let storage = window.localStorage();
storage.a = "key";
sotrage[a] = "key";
