1.7 Cookie、LocalStorage、SessionStorage

Cookie

HTTP cookie 為伺服器傳送給使用者瀏覽器的一個小片段資料。瀏覽器可能儲存並在下一次請求回傳 cookie 至相同的伺服器。Cookie 通常被用來保持使用者的登入狀態

• 大小約 4kb

• 每次 request 時都會帶上

LocalStorage / SessionStorage

是HTML5提供兩種在客戶端儲存資料的方法，彌補了cookie儲存量小、不適用於大量資料本地儲存的問題。 從字面上的意思就可以看出，sessionStorage將資料儲存在session中，瀏覽器關閉也就沒了；而localStorage則一直將資料儲存在客戶端本地； 不管是sessionStorage，還是localStorage，可使用的API都相同。

• 都是使用 key / value pair 的方式 給值或取值

• 大小預設有 5mb

• 每次 request 不會帶上

LocalStorage

不會過期，除非手動清除

SessionStorage

每次分頁或瀏覽器關掉後就會清除

生命周期只存在瀏覽囂的 單一分頁 ，也就是 另開新分頁的話 ，又是一個 新的sessionStorage ，預設無逾期時間，除非關閉該分頁、關閉瀏覽器等，sessionStorage就會消失。

三者差異

應用場景

• Cookie

比較常用的場景就是判斷用戶是否登錄 針對登錄過的用戶，服務器端會在他登錄時往Cookie 插入一段加密過的辨識碼，下次只要讀取這個值就可以判斷用戶是否登錄。

• LocalStorage

而另一方面 localStorage 代替了 Cookie 管理購物車的工作，同時也能勝任其他工作。比如說HTML遊戲通常會產生一些數據，localStorage 也很適合使用。

• SessionStorage

如果遇到一些內容特別多的表單，為了提升用戶體驗，可能要把表單頁面拆分成多個子頁面，然後按照步驟引導用戶。這時候 sessionStorage 就可以發揮出效用。