[ 筆記 ] 瀏覽器資料儲存 - Cookie、LocalStorage、SessionStorage


Posted by krebikshaw on 2020-07-18

Cookie

  • 是個小型文字檔 ( 限制 4k )
  • 當瀏覽器發送 Request 到 Server 之後,回傳的 Response header 之中會帶有一個 Set-Cookie 的資料,只要瀏覽器看到這個資料,就會把 Cookie 寫進來。
  • 當瀏覽器再發送 Reqeust 時,會自動把 cookie 帶到 Server 端。
  • 為了讓 Server 可以辨識使用者身份,所有 request 都會自動把該 domain 的 Cookie 帶上去。
  1. 第一次登入需要輸入帳號密碼
  2. 第二次登入帶著 Cookie (通行證) ,就不用再登入一次

LocalStorage

  • 最推薦也最簡單的資料儲存方法。
  • 儲存資料容量至少5MB以上,比Cookie大很多
  • 形式:key → value
    • key 跟 value 必須是字串,如果是 object 或 number 會自動轉換成 string
    • 存取 JSON 格式要先經過轉換。
  • 生命週期:沒有過期時間,除非手動刪除
    • 意思是說關掉分頁、關掉瀏覽器再打開也都還在。
  • 不像 Cookie 會隨著 Request 送到 Server 端,Storage 只作用在 Client 端瀏覽器
    • 適合儲存較複雜且不敏感的資料 ( 喜好設定、顏色樣式等等 )

操作 API

  • 設置資料:localStorage.setItem(key, value)
  • 取得資料:let storageValue = localStorage.getItem(key, value)
  • 清除資料:localStorage.removeItem(key)
  • 清除全部資料:localStorage.clear()

SessionStorage

  • 跟 LocalStorage 只差在生命週期的不同。

  • 生命週期: 只儲存在瀏覽器同一個分頁還開啟著的狀態下,把分頁關掉、到另一個分頁就沒有作用了。

  • 因為不同分頁是不能共享 SessionStorage,所以通常拿來儲存更短期的資訊。

注意:以上的三種「 瀏覽器儲存空間 」的資料儲存方式是會依據「 網站 」來儲存,不同 domain 無法共享這些儲存在 Client 端的資料。

參考資料:
[Html 5] WebStorage - localStorage和sessionStorage 基本使用方法
JS30-Day15-LocalStorage


#storage







Related Posts

[html] 暗藏玄機的跨域連結與 rel 屬性應用

[html] 暗藏玄機的跨域連結與 rel 屬性應用

簡明 Scratch 小遊戲開發入門教學

簡明 Scratch 小遊戲開發入門教學

實作 PHP API & 留言板 SPA(下)

實作 PHP API & 留言板 SPA(下)


Comments