浏览器缓存

缓存

HTTP header 缓存工作原理

1. 浏览器发起请求的时候，根据请求头的 express 和 cache-control 来判断是否命中强缓存，如果是，怎直接从缓存读取资源，不会发起请求。
2. 如果没有命中强缓存，浏览器会发起一个请求到服务端，并通过 last-modified If-modified-since 和 etag if-none-match 判断资源是否命中协商缓存，如果命中， 不会 中断请求，服务器会将这个请求返回（304），但是不会返回资源，资源会从缓存中读取。
3. 如果没有命中缓存，则发起请求，直接从服务器加载资源。

<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />

数据缓存

• cookie：4kb，可以手动设置过期时间
• localStorage：5M，不手动清除一直存在，可以跨标签访问
• sessionStorage：5M，不可以跨标签访问，窗口回话结束自己清除
• indexDB：浏览器数据库，无限容量，除非手动清除，否则一直存在
• webSQL：关系数据库，废弃