浏览器存储
cookie
设置 cookie
HTTP/1.1 200 OK
Content-type: text/html
Set-Cookie: name=value; expires=Mon, 22-Jan-07 07:10:24 GMT; domain=.wrox.com; path=/; secure
Other-header: other-header-value
这里创建的 cookie 对所有 wrox.com 的子域及该域中的所有页面有效（通过 path=/ 指定）。不过，这个 cookie 只能在 SSL 连接上发送，因为设置了 secure 标志。 要知道，域、路径、过期时间和 secure 标志用于告诉浏览器什么情况下应该在请求中包含 cookie。 这些参数并不会随请求发送给服务器，实际发送的只有 cookie 的名/值对。
SameSite
Non**e**。浏览器会在同站请求、跨站请求下继续发送 cookies，不区分大小写。
**Strict****。**浏览器将只在访问相同站点时发送 cookie。（在原有 Cookies 的限制条件上的加强，如上文 “Cookie 的作用域” 所述）。
**Lax**。与 **Strict** 类似，但用户从外部站点导航至 URL 时（例如通过链接）除外。 在新版本浏览器中，为默认选项，Same-site cookies 将会为一些跨站子请求保留，如图片加载或者 frames 的调用，但只有当用户从外部站点导航到 URL 时才会发送。如 link 链接。
未设置 SameSite, 主流浏览器默认设为 Lax。
前端 cookie 设置
JS 想要操作 cookie 只能通过 BOM 接口 document.cookie 操作，并且需要 URL 编码(可以用 decodeURIComponent)，一般都是封装下方法再使用。
如果 cookie 设置了 HttpOnly, 则前端无法操作。
限制
不超过 300 个 cookie；
每个 cookie 不超过 4096 字节；
每个域不超过 20 个 cookie；
每个域不超过 81920 字节。
Storage
方法
clear()：删除所有值。
getItem(name)：取得给定 name 的值。
key(index)：取得给定数值位置的名称。
removeItem(name)：删除给定 name 的名/值对。
setItem(name, value)：设置给定 name 的值。
sessionStorage
使用 sessionStorage 存储的数据只在当前会话有效。有效的页面：
- 设置 sessionStorage 的页面
页面1 - 由
页面1打开的页面
如果在地址栏敲入新的页面，即使是同一个页面，也无法获取到 sessionStorage。
localStorage
满足域、端口和协议都相同的页面可以获取到同一个 localSrtorage。
区别
localStorage: 存储在 localStorage 中的数据会保留到通过 JavaScript 删除或者用户清除浏览器缓存。localStorage 数据不受页面刷新影响，也不会因关闭窗口、标签页或重新启动浏览器而丢失。
sessionStorage: sessionStorage 中的数据不受页面刷新影响，会在关闭标签页后丢失。
IndexedDB
todo
Cache Storage API
Cache 这个 API 是针对 Request Response 的。Cache 一般结合 Service Worker 使用，因为请求级别的缓存与具有页面拦截功能的 Service Worker 最配。
创建或打开一个命名空间
// 不存在则创建
const myCache = await caches.open(‘myCache’);
添加缓存
通过 add/addAll 方法添加，调用 add 会类似 fetch 一样发送请求，并将响应放到 Cache Storage 里面。
在 put 方法里传一个 Response 也可以实现添加缓存。
// 参数同 fetch
myCache.add(‘/test-url’);
// 使用 put
fetch(url).then(function (response) {
if (!response.ok) {
throw new TypeError(‘bad response status’);
}
return cache.put(url, response);
})
读取
通过 match 或 matchAll 方法读取。
// 参数同 fetch, 可以是 URL 地址，也可以是 Request 对象
const res = await myCache.match(“/subscribe”);
// const res = await myCache.matchAll(“/subscribe”);
更新
通过 add 或 put 方法更新。
const request = new Request(“/subscribe”);
const fetchResponse = await fetch(request);
myCache.put(request, fetchResponse);
销毁
使用 delete 方法删除某个路径的缓存或者直接删除整个命名空间。
myChache.delete(‘/subscribe’);
caches.delete(‘myChache’);
使用场景
在 service worker (在全局环境里也能用) 中用来缓存 js/css/img 文件或者不经常更新的接口，加快请求或者提供离线访问能力。