Cookies
- 儲存在瀏覽器上的小型文字資料,單一容量限制約 4KB。
- 可儲存數量依據瀏覽器不同。
- 可設定失效時間,預設是關閉瀏覽器就失效。
- 與伺服器交互,每次請求會夾帶在 header 傳送過去,因此當容量越高,效能相對會降低。
- 沒有提供 API,需自行封裝。
參數設定
- Domain
作用範圍 - 指定網域可以使用,預設是當前網域但不包含子網域。
domain=test.com
表示 test.com 及 subdomain.test.com 皆可存取。 - Path
作用範圍 - 指定路徑可以使用這個 cookie,預設是都可存取。
path=/admin
表示 test.com/admin & test.com/admin/web 皆可存取,而 test.com/user 則無法存取。 - Expires
有效期限 - 該 cookie 過期的時間,值為Date.toUTCString() 格式的時間字串。
expires=Wed, 11 Aug 2021 12:39:13 GMT
轉化方式為 new Date("指定時間").toUTCString()。 - Max-Age
有效期限 - 該 cookie 可以留存的時間,單位為秒。若同時設定 Max-Age & Expires,則 Max-Age 優先。
max-Age=120
表示該 cookie 兩分鐘後失效。 - Secure
安全性 - 是否只能在 https 下傳遞,格式為 boolean 值。
Secure;
或Secure=true
表示 http://test.com 無法存取, https://test.com 可以存取。 - HttpOnly
安全性 - 限制非 HTTP 接口無法取得該 cookie,防止 javascript 存取,即為無法透過 document.cookie 取得值,該參數只能在伺服器端設置。 - SameSite
安全性 - 防止 cookie 以跨站方式傳送,避免 CSRF 攻擊。
- Strict:完全禁止第三方 cookies。ex. testa.com 中的 cookie 並不會傳送到 testb.com 去。
- Lax:大多數不發送 cookie,GET 請求除外。
- None:容許所有網站對 cookie 的存取,必須搭配 Secure 才有效。
操作
- 查詢
document.cookie
新增
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 路徑存取,從開始設置後的五秒將失效。
- 更新
設置相同名稱的值就會覆蓋。document.cookie = 'user=Amy'
- 刪除
兩種方式皆可,設定 可留存時間=0 或是 過期時間為過去,刪除不須指定value。document.cookie = 'user=; expires=Tue, 31 Dec 2019 16:00:00 GMT'; document.cookie = 'user=; max-age=0'
Web Storage
- 以 key-value 形式儲存在瀏覽器中。
- 不需要跟伺服器交互。
- 空間較 cookies 大,一般可到 5MB 左右。
- localStorage 可監聽 storage 事件,有變動時會呼叫。
- 提供 API 操作:getItem、setItem、removeItem、clear。
localStorage
同網域底下皆可存取,永久性儲存,除非手動刪除。
- 查詢
localStorage.getItem('test')
- 新增
localStorage.setItem('test','TestLocalStorageSetData')
- 更新
相同 key 會直接覆蓋 value。localStorage.setItem('test','TestLocalStorageSetData')
- 刪除
指定要刪除的 localStorage。localStorage.removeItem('test')
刪除全部的 localStorage。localStorage.clear()
- 監聽
利用監聽來觀察storage的變化。window.addEventListener('storage',function(){ console.log('storage change!') })
sessionStorage
只儲存在開啟的瀏覽器頁面中,關閉瀏覽器後就會消失。
- 查詢
sessionStorage.getItem('test')
- 新增
sessionStorage.setItem('test','TestSessionStorageSetData')
- 更新
相同 key 會直接覆蓋 value。sessionStorage.setItem('test','TestSessionStorageSetData')
- 刪除
指定要刪除的 sessionStorage。sessionStorage.removeItem('test')
刪除全部的 sessionStorage。sessionStorage.clear()