持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第9天，点击查看活动详情
HTTP缓存
- HTTP请求传输时用到的缓存，一般是服务端代码来设置。
- 在浏览器缓存中查找请求结果，并且根据结果的缓存规则来决定是否使用缓存结果，主要有三种情况：
- 不存在缓存结果和缓存标识，强制缓存失效，直接向服务器发起请求。
- 存在缓存结果和缓存标识，但结果已经失效，强制缓存失效，使用协商缓存。
- 存在缓存结果和缓存标识，并且结果没有失效，强制缓存生效，直接返回结果。
强制缓存的规则
- 当浏览器向服务器发起请求时，服务器会把缓存规则放到HTTP响应的HTTP头部中，和请求结果一起返回到浏览器，控制强制缓存的字段有Expires和Cache-control，Cache-Control优先级比Expires高。
Expires
- HTTP/1.0中控制网页缓存的字段，值为服务器返回请求结果缓存的到期时间，即再次发起请求时，如果客户端时间小于Expires的值时，直接使用缓存结果。
Cache-Control
- HTTP/1.1中通用额控制网页缓存的字段，值有以下取值：
- public：所有内容都将被缓存（客户端和代理服务器都可以缓存）
- private：所有内容只有客户端可以缓存，是默认值
- no-cache：客户端缓存内容，但是是都使用缓存需要经过协商缓存来验证
- no-store：所有内容偶读不会被缓存，即不用强制缓存，也不实用协商缓存
- max-age=xxx：缓存内容将在xxx秒后消失 当这两个字段同时存在时，只有Cache-Control生效
协商缓存规则
- 在强制缓存失效后，浏览器携带缓存标识发起请求，服务器根据缓存标识决定是否使用缓存。有两种情况：
- 协商缓存生效（304）
- 协商缓存失效（200）
- 当浏览器向服务器发起请求时，服务器会在响应的HTTP头部中把协商缓存字段返回给浏览器
Last-Modified/If-Modified-Since
-
Last-Modified是服务器响应请求时，返回该资源文件在服务器最后被修改的时间
-
If-Modified-Since则是客户端再次发起该请求时，携带上次请求返回的Last-Modified值，通过此字段值告诉服务器该资源上次请求返回的最后被修改时间。服务器收到请求后，发现请求头含有If-Modified-Since字段，则会根据If-Modified-Since的字段值与该资源在服务器的最后被修改时间做对比，若服务器的资源最后被修改时间大于If-Modified-Since的字段值，则重新返回资源，状态码是200，否则返回304，代表资源无更新，可继续使用缓存文件。
Etag/If-None-Match
-
Etag是服务器响应请求时，返回当前资源文件的一个唯一标识（由服务器生成
-
If-None-Match是客户端再次发起该请求时，携带上次请求返回的唯一标识Etag值，通过此字段值告诉服务器该资源上次请求返回的唯一标识值。服务器收到该请求后，发现改请求头中含有If-None-Match，则会根据If-None-Match的字段值与该资源所在服务器的Etag值作对比，一致则返回304，代表资源无更新，继续使用缓存文件；不一致则重新返回资源文件，状态码为200
Etag/If-None-Match优先级高于Last-Modified/If-Modified-Since，同时存在则只有Etag/If-None-Match生效。
强制缓存和协商缓存
- 强制刷新可以使协商缓存无效，在强制缓存没有过期的时候，需要更改资源路径才会使当前缓存失效
浏览器缓存
- 前端代码的设置
本地存储种类
- Cookie：主要用于用户信息的存储，cookie的内容会在请求的时候自动的带上，传递给服务器，但是容量比较小。
- LocalStorage：保留在浏览器内，直到用户清除浏览器缓存数据
- SessionStorage：保留在浏览器内，标签页被关闭时，SessionStorage就会被清楚
- IndexDB：非关系型数据库，有50M的容量
总结
对于缓存，要么是服务端设置，要么是前端设置。 我们在开发过程中，需要针对不同场景选择不同类型的缓存，优雅的对数据进行存取，合理利用资源。
