[JavaScript] Cookie、LocalStorage、SessionStorage 差異
基本概念
Cookie
可設定失效時間。 預設是關閉瀏覽器後失效
HTTP cookie（web cookie、browser cookie）為伺服器傳送給使用者瀏覽器的一個小片段資料。瀏覽器可能儲存並在下一次請求回傳 cookie 至相同的伺服器。Cookie 通常被用來保持使用者的登入狀態 — — 如果兩次請求都來自相同的瀏覽器。有個數限制（各瀏覽器不同），一般不能超過20個
- 大小約 4kb
- 每次 request 時都會帶上
LocalStorage / SessionStorage
是HTML5提供兩種在客戶端儲存資料的方法，彌補了cookie儲存量小、不適用於大量資料本地儲存的問題。
從字面上的意思就可以看出，sessionStorage將資料儲存在session中，瀏覽器關閉也就沒了；而localStorage則一直將資料儲存在客戶端本地； 不管是sessionStorage，還是localStorage，可使用的API都相同。
- 都是使用 key / value pair 的方式 給值或取值
- 大小預設有 5mb
- 每次 request 不會帶上
LocalStorage
不會過期，除非手動清除
SessionStorage
每次分頁或瀏覽器關掉後就會清除
生命周期只存在瀏覽囂的 單一分頁 ，也就是 另開新分頁的話 ，又是一個 新的sessionStorage ，預設無逾期時間，除非關閉該分頁、關閉瀏覽器等，sessionStorage就會消失。
三者差異
應用場景
Cookie
比較常用的場景就是判斷用戶是否登錄
針對登錄過的用戶，服務器端會在他登錄時往Cookie 插入一段加密過的辨識碼，下次只要讀取這個值就可以判斷用戶是否登錄
- Session 管理
帳號登入、購物車、遊戲分數，或任何其他伺服器應該記住的資訊 - 個人化
使用者設定、佈景主題，以及其他設定 - 追蹤
記錄並分析使用者行為
LocalStorage
而另一方面 localStorage 代替了 Cookie 管理購物車的工作，同時也能勝任其他工作。比如說HTML遊戲通常會產生一些數據，localStorage 也很適合使用。
SessionStorage
如果遇到一些內容特別多的表單，為了提升用戶體驗，可能要把表單頁面拆分成多個子頁面，然後按照步驟引導用戶。這時候 sessionStorage 就可以發揮出效用。
安全考慮
並非所有數據都適合儲存在這些其中。因為只要網站中存有XSS 的風險，打開控制台，就可以隨意修改值，就能對你的localStorage 肆意妄為。所以千萬不要將敏感數據儲存在這其中。
