12. 存储

Cookie

通常是由 Web 服务器使用响应 Set-Cookie HTTP-header 设置的

读取

document.cookie

返回字符串， key=value 形式，中间以分号和空格隔开，类似 "key1=value1; key2=value2"

写入

document.cookie = 'key1=value1'

它是一个 setter，只会新增或更改 key1 的值，其他的不变

写入时有几个选项可以设置，以分号隔开加在后面：

path

; path=/[mypath]
绝对路径，该路径下的页面可以访问该 cookie，默认为当前文档位置的路径

通常设置为根路径 /，对此网站的所有页面可见

domain

; domain=xxx.com
控制了可访问 cookie 的域，默认不设置情况下，cookie 只有在设置的域下才能被访问到，子域也访问不到
如果显式设置为 domain=xxx.com，子域就可以访问到
且只能设置为当前域名及其父域名，否则无效

expires，max-age

设置过期时间，默认不设置情况下，关闭浏览器之后就会消失（关闭标签页不消失）
; max-age=max-age-in-seconds // 如一年为 60*60*24*365
; expires=date-in-GMTString-format // GMT 时间，使用 date.toUTCString 获取

secure

; secure
只能被通过 HTTPS 传输

samesite

Cookie 在跨站请求时不会被发送，防止 CSRF 攻击
; samesite=None：不限制
; samesite=Strict：只在请求的 url 和网站的 url 相同时才会发送（导航到目标网站时也不会带上目标网站的 cookie）
; samesite=Lax：同上，但是如果以下两个条件均成立，会例外进行发送：

1. HTTP 方法是安全的（如 GET）
2. 导航到目标网站，但是页面内的 iframe 和 image 等不发送

Cookie 的 SameSite 属性 - 阮一峰的网络日志 (ruanyifeng.com)

httpOnly

禁止任何 JavaScript 访问该 cookie，使用 document.cookie 看不到此 cookie，也无法对此 cookie 进行操作

Warning

更新或删除必须使用相同的 path 和 domain

LocalStorage，sessionStorage

在浏览器上保存键/值对，同源，localStorage 和 sessionStorage 具有共同的属性和方法：

• setItem(key, value)：存储键/值对
• getItem(key)：按照键获取值
• removeItem(key)：删除键及其对应的值
• clear()：删除所有数据
• key(index)：获取该索引下的键名
• length：存储的键值对的个数

NOTE

键和值都必须是字符串，其他类型自动转为字符串，可以使用 JSON 方法进行读写

遍历

1. for 循环

for(let i = 0; i < localStorage.length; i++) {
  let key = localStorage.key(i)
  alert(`${key}: ${localStorage.getItem(key)}`)
}

2. for…in 循环 + hasOwnProperty

for(let key in localStorage) {
  if (!localStorage.hasOwnProperty(key)) {
    continue // 跳过像 "setItem"，"getItem" 等这样的键
  }
  alert(`${key}: ${localStorage.getItem(key)}`)
}

3. Object.keys()

let keys = Object.keys(localStorage);
for(let key of keys) {
  alert(`${key}: ${localStorage.getItem(key)}`)
}

Warning

它们都是不可迭代的，不能用 for… of

Storage 事件

当 localStorage 或 sessionStorage 中的数据更新后，storage 事件就会触发。
该事件会在所有可访问到存储对象的 window 对象上触发，导致当前数据改变的 window 对象除外
可以在同源的不同窗口交换消息

NOTE

功能更全地交换信息：Broadcast Channel API 可以实现同源下浏览器不同窗口，Tab 页，frame 或者 iframe 下的 浏览器上下文 (通常是同一个网站下不同的页面) 之间的简单通讯

indexedDB

浏览器内建的数据库，适用于离线应用

总结

	生命周期	存储大小	与服务端通信	同源
cookie	默认关闭浏览器失效，可设置过期时间	4KB	请求 header 中携带	√
localStorage	一直存在，除非被清理	5MB	不参与	√
sessionStorage	tab 标签页关闭失效 刷新不会，关闭标签页后恢复也不会，但是关闭浏览器再恢复失效	5MB	不参与	√
indexedDB	一直存在，除非被清理	不设限	不参与	√