缓存与存储

缓存

缓存命中流程：

1. 发送请求，根据请求头的 Expires 和 cache-control 的 max-age（强缓存）判读是否命中和过期，如果命中而且没过期则直接从缓存获取资源（状态码为 200），否则进入都下一步：
2. 根据请求头的 last-modified 和 etag 判断是否命中协商缓存；如果命中，直接从缓存获取资源。状态码为 304。如果没有命中，则进入下一步：
3. 如果前两步都没有命中，则直接从服务端获取资源

一些细节

• Expires 是老旧的实现，根据系统时间判断是否过期，所以建议使用 cache-control，默认下它的优先级也比 expires 高。
• 在协商缓存时，Etag 先判断，发送的是 If-none-match 的请求，值是一个 hash 字符串；Last-Modified 后判断，发送 If-Modified-Since，值是上次请求返回的 Last-Modified 值.
• 禁用强缓存的方法是，在 cache-control 下加一个 no-cache 字段。
• 判断强缓存是否生效：看有没有发送请求即可。强缓存是不会发请求的。

刷新

普通刷新：跳过所有缓存检查，但是会添加上协商缓存标头 if-none-match 和 if-modified-since。

强制刷新：跳过所有缓存，直接发请求。

存储

客户端存储分为老旧的 cookie，现在流行的 web Storage、IndexDB，未来的 cache。

cookie

cookie 实际上是 http 协议的一部分，具体实现为 document.cookie。cookie 是基于域的，它们不区分协议。这导致了安全问题，通过设置 secure 字段来禁止未加密的 http。

由服务器使用响应头 Set-Cookie 设置，然后浏览器使用 Cookie 头将它们自动添加到每个对相同域的请求中。

web Storage 介绍

存储是以 域 为区分单位的，每个域都有一个单独的数据存储区。这意味着它遵循同源策略，是安全的。

分为 localStorage 和 sessionStorge。他们都是 window 对象的属性，一个页面一个 window。他们都是 Storage 接口的实例，均只能存储字符串类型。在隐身模式下，localStorage 被视为 sessionStorage。

localStorage 的示例见“MDN给出的例子”文件夹。

IndexDB

IndexedDB 适用于离线应用。web Storage 用于存储小型数据，只能存储字符串，而 IndexDB 可以用于存储更加复杂和大型的数据，是一个完整的数据库。