知識點：cookie，localStorage，sessionStorage

cookie

• 本身用於瀏覽器和 server 端通訊
• 被“借用”到本地儲存來
• 可以使用 document.cookie='...' 來修改

cookie的內容為 key=value;的形式，document.cookie 這個api每次只能設定一個key=value 的內容，設定其他值會追加到cookie

cookie的缺點

• 儲存大小，最大4kb
• http 請求時需要傳送到服務端，增加請求的資料量
• 只能使用 document.cookie='...' 來修改，太過簡陋

localStorage 和 sessionStorage

• HTML5 專門為儲存設計，最大可存 5M
• API 簡單易用：setItem；getItem
• 不會隨著 http 請求被髮送出去

localStorage 和 sessionStorage的區別

• localStorage 資料會永久儲存，除非程式碼或手動刪除
• sessionStorage 資料只存在於當前會話，瀏覽器關閉則清空
• 一般使用 localStorage 更多

總結：cookie、localStorage和sessionStorage的區別

相同點：都儲存在客戶端

不同點：

• 儲存大小：
  • cookie 的大小受限於http請求頭長度的限制，其大小不能超過4kb
  • sessionStorage 和 localStoragae 雖然也有儲存大小的限制，但是比 cookie 大得多，可以達到5M甚至更大
• 有效時間：
  • cookie 設定 cookie 過期時間之前一直有效，即使視窗或瀏覽器關閉
  • sessionStorage 資料在當前瀏覽器視窗關閉之後自動刪除
  • localStorage 儲存持久化資料，瀏覽器關閉後資料不會丟失，除非主動刪除資料
• 資料於伺服器之間的互動方式：
  • cookie 的資料會隨著 http 請求自動傳遞到伺服器，服務端也可以寫 cookie 到客戶端
  • sessionStorage 和 localStorage 不會跟隨 http 請求把資料傳送給伺服器，僅在本地儲存