【瀏覽器資料存取】cookies、localStorage、sessionStorage


Posted by LilyLiu on 2021-08-17

Cookies

  1. 儲存在瀏覽器上的小型文字資料,單一容量限制約 4KB。
  2. 可儲存數量依據瀏覽器不同。
  3. 可設定失效時間,預設是關閉瀏覽器就失效。
  4. 與伺服器交互,每次請求會夾帶在 header 傳送過去,因此當容量越高,效能相對會降低。
  5. 沒有提供 API,需自行封裝。

參數設定

  1. Domain
    作用範圍 - 指定網域可以使用,預設是當前網域但不包含子網域。
    domain=test.com
    表示 test.com 及 subdomain.test.com 皆可存取。
  2. Path
    作用範圍 - 指定路徑可以使用這個 cookie,預設是都可存取。
    path=/admin
    表示 test.com/admin & test.com/admin/web 皆可存取,而 test.com/user 則無法存取。
  3. Expires
    有效期限 - 該 cookie 過期的時間,值為Date.toUTCString() 格式的時間字串。
    expires=Wed, 11 Aug 2021 12:39:13 GMT
    轉化方式為 new Date("指定時間").toUTCString()。
  4. Max-Age
    有效期限 - 該 cookie 可以留存的時間,單位為秒。若同時設定 Max-Age & Expires,則 Max-Age 優先。
    max-Age=120
    表示該 cookie 兩分鐘後失效。
  5. Secure
    安全性 - 是否只能在 https 下傳遞,格式為 boolean 值。
    Secure;Secure=true
    表示 http://test.com 無法存取, https://test.com 可以存取。
  6. HttpOnly
    安全性 - 限制非 HTTP 接口無法取得該 cookie,防止 javascript 存取,即為無法透過 document.cookie 取得值,該參數只能在伺服器端設置。
  7. SameSite
    安全性 - 防止 cookie 以跨站方式傳送,避免 CSRF 攻擊。
  • Strict:完全禁止第三方 cookies。ex. testa.com 中的 cookie 並不會傳送到 testb.com 去。
  • Lax:大多數不發送 cookie,GET 請求除外。
  • None:容許所有網站對 cookie 的存取,必須搭配 Secure 才有效。

操作

  1. 查詢
    document.cookie
    
  2. 新增
    document.cookie = 'cookie名稱=cookie值'

    document.cookie = 'user=Lily'
    

    表示設定一個為 user 的 cookie,預設是該網域底下的任一路徑可存取,但不包含子網域,關閉瀏覽器即失效。

     document.cookie = 'user=Lily;role=admin'
    

    只會存入 user=Lily,無法同時存兩個 cookie。

     document.cookie = 'role=admin'
     console.log(document.cookie) // "user=Lily;role=admin"
    

    當已有設定其他 cookie 時,此時在寫入新的並不會覆蓋,cookie 名稱相同時才會覆蓋舊的值。

     document.cookie = 'birthday=20210101; domain:test.com; path:/admin; max-Age:5; expires=Wed, 11 Aug 2021 15:59:59 GMT; Secure';
    

    設定參數,以分號區隔,需有設定 cookie名稱=cookie值,上述表示新增一個名為 birthday 的 cookie,允許 https://test.com 底下的 /admin 路徑存取,從開始設置後的五秒將失效。

  3. 更新
    document.cookie = 'user=Amy'
    
    設置相同名稱的值就會覆蓋。
  4. 刪除
    document.cookie = 'user=; expires=Tue, 31 Dec 2019 16:00:00 GMT';
    document.cookie = 'user=; max-age=0'
    
    兩種方式皆可,設定 可留存時間=0 或是 過期時間為過去,刪除不須指定value。

Web Storage

  1. 以 key-value 形式儲存在瀏覽器中。
  2. 不需要跟伺服器交互。
  3. 空間較 cookies 大,一般可到 5MB 左右。
  4. localStorage 可監聽 storage 事件,有變動時會呼叫。
  5. 提供 API 操作:getItem、setItem、removeItem、clear。

localStorage

同網域底下皆可存取,永久性儲存,除非手動刪除。

  1. 查詢
    localStorage.getItem('test')
    
  2. 新增
    localStorage.setItem('test','TestLocalStorageSetData')
    
  3. 更新
    localStorage.setItem('test','TestLocalStorageSetData')
    
    相同 key 會直接覆蓋 value。
  4. 刪除
    localStorage.removeItem('test')
    
    指定要刪除的 localStorage。
    localStorage.clear()
    
    刪除全部的 localStorage。
  5. 監聽
    window.addEventListener('storage',function(){ console.log('storage change!') })
    
    利用監聽來觀察storage的變化。

sessionStorage

只儲存在開啟的瀏覽器頁面中,關閉瀏覽器後就會消失。

  1. 查詢
    sessionStorage.getItem('test')
    
  2. 新增
    sessionStorage.setItem('test','TestSessionStorageSetData')
    
  3. 更新
    sessionStorage.setItem('test','TestSessionStorageSetData')
    
    相同 key 會直接覆蓋 value。
  4. 刪除
    sessionStorage.removeItem('test')
    
    指定要刪除的 sessionStorage。
    sessionStorage.clear()
    
    刪除全部的 sessionStorage。

總結


#cookies #localstorage #sessionstorage







Related Posts

關於 Closure / lexical scope

關於 Closure / lexical scope

利用 Elm 製作 Chrome Extension

利用 Elm 製作 Chrome Extension

【Day03】註冊免費 DNS

【Day03】註冊免費 DNS


Comments