44.缓存

ResponseHeader+Cache-Control

max-age 以秒为单位

no-cache 前端不使用缓存

no-store 前后端皆不使用缓存

private 只允许终端浏览器缓存

public 允许所有中间路由环节进行缓存

ResponseHeader+ETag 响应内容的指纹（类似于哈希）

RequestHeader +if-None-Match=ETag值

ResponseHeader+LastModified 响应内容的最后修改时间（秒）

RequestHeader +if-Modified-Since=LastModified值

正常操作:强制缓存有效，协商缓存有效

手动刷新:强制缓存失效，协商缓存有效

强制刷新:强制缓存失效，协商缓存失效

cookie 是一个以字符串的形式存储数据的位置

每一个 HTTP 请求都会在请求头中携带 cookie 到服务端

每一个 HTTP 响应都会在响应头中携带 cookie 到客户端

也就是说，cookie 是不需要我们手动设置，就会自动在 客户端 和 服务端之间游走的数据

我们只是需要设置一下 cookie 的内容就可以

cookie 是以字符串的形式存储，在字符串中以 key=value 的形式出现

每一个 key=value 是一条数据

多个数据之间以 ; 分割，分号后有空格

// cookie 的形态
'a=100; b=200; c=300;'

1. 存储大小有限制，一般是 4 KB 左右
2. 数量有限制，一般是 50 条左右
3. 有时效性，也就是有过期时间，一般是 会话级别（session）（也就是浏览器关闭就过期了）
4. 有域名限制，也就是说谁设置的谁才能读取

读取 cookie 的内容使用 document.cookie

const cookie = document.cookie
console.log(cookie) // 就能得到当前 cookie 的值

设置 cookie 的内容使用 document.cookie

// 设置一个时效性为会话级别的 cookie
document.cookie = 'a=100'

// 设置一个有过期时间的 cookie
document.cookie = 'b=200;expires=Thu, 18 Dec 2043 12:00:00 GMT";'
// 上面这个 cookie 数据会在 2043 年 12 月 18 日 12 点以后过期，过期后会自动消失

删除 cookie 的内容使用 document.cookie

// 因为 cookie 不能直接删除
// 所以我们只能把某一条 cookie 的过期时间设置成当前时间之前
// 那么浏览器就会自动删除 cookie
document.cookie = 'b=200;expires=Thu, 18 Dec 2018 12:00:00 GMT";'

window.sessionStorage

生命周期为关闭浏览器窗口

在同一个窗口（页面）下数据共享

以键值对的形式储存使用

储存数据

sessionStorage.setItem(key,value)

获取数据

sessionStorage.getItem(key)

删除数据

sessionStorage.removeItem(key)

删除所有数据

sessionStorage.clear()

window.localStorage

生命周期永久生效，除非手动删除否则关闭页面也存在

可以多窗口（页面）共享（仅限同一浏览器）

以键值对的形式储存使用

储存数据

localStorage.setItem(key,value)

获取数据

localStorage.getItem(key)

删除数据

localStorage.removeItem(key)

删除所有数据

localStorage.clear()

数据长度

localStorage.length