浏览器缓存总结_浏览器网页的缓存代码-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_43464194/article/details/140412843

一、本地缓存

1. webStorage

localStorage: 本地持久化
sessionStorage：会话级

2. IndexDB：浏览器提供的客户端数据库

3. Cookie：主要用于在客户端和服务器之间传递状态信息（4kb）

如何保障cookie安全？

Set-Cookie: id=value; HttpOnly （预防XSS）
Set-Cookie: id=value; Secure（只在https中传输）
Set-Cookie: id=value; SameSite=Strict/Lax(默认)/None

（SameSite 属性可以防止跨站请求伪造（CSRF）攻击，只在同一站点请求中发送。）

设置正确的过期时间
加密cookies
限制cookies作用域

 // 支持一级域名
 Set-Cookie: id=value; Domain=.example.com
 // 支持多个域名
 Set-Cookie: id=value; Domain=.example1.com
 Set-Cookie: id=value; Domain=.example2.com

二、HTTP缓存

1. 强缓存：给浏览器缓存设置过期时间，超过这个时间之后缓存过期，浏览器需要重新请求。

旧：expires， expires返回的是服务器的时间，但判断的时候用的却是客户端的时间，加入手动改变了客户端的时间，会导致缓存时间判断出错，这也是引入Cache-Control:max-age指令的原因之一。

Expires: Wed Feb 20 2019 11:25:41 GMT

新：cache-control， max-age设置的是相对缓存时间开始往后的多少秒，因此不再受日期不准确情况的影响。

cache-control: max-age=xxx, public/private/immutable

区别：

public:客户端和代理服务器都可以缓存该资源,如果用户做了刷新操作，就向服务器发起http请求
private:只有客户端缓存，代理服务器不缓存，在max-age时间内，直接读取缓存
immutable：客户端在max-age时间内，直接读缓存，即使用户做了刷新操作，也不向服务器发起http请求

2. 协商缓存：协商缓存解决了无法及时获取更新资源的问题。它利用【Last-Modified，If-Modified-Since】（修改文件的时间）、【ETag、If-None-Match】（修改生成唯一标识符）两组字段,对资源做标识。然后由服务器做分析，如果资源未更新，则返回304状态码.那么浏览器则会从缓存中读取资源，否则重新请求资源。

优先级：ETag与If-None-Match > Last-Modified与If-Modified-Since, 同时存在时, 前者覆盖后者.

Last-Modified与If-Modified-Since：
1. 浏览器第一次向服务器请求资源，服务器会在返回这个资源的同时，在response的header加上Last-Modified表示这个资源在服务器上的最后修改时间

Last-Modified: Wed Feb 20 2021 14:08:32 GMT

浏览器之后(第2次+)再向服务器请求这个资源时，服务器在request的header上加上If-Modified-Since值就是上一次请求时返回的Last-Modified的值。
服务器再次(第2次+)收到资源请求时，根据浏览器传过来If-Modified-Since和资源在服务器上的最后修改时间判断资源是否有变化。
如果没有变化则返回304 Not Modified，但是不会返回资源内容；
如果有变化,返回200，就正常返回资源内容。
当浏览器收到304的响应后，就会从缓存中加载资源。
当浏览器收到200的响应后，则从服务器加载新资源时，
Last-Modified Header在重新加载的时候会被更新，下次请求时，If-Modified-Since会启用上次返回的Last-Modified值。

ETag与If-None-Match
1. 浏览器第一次跟服务器请求一个资源，服务器在返回这个资源的同时，在response的header加上ETag值表示是服务器根据当前请求的资源生成的一个唯一标识字符串，如ETag:3158445487445,只要资源有变化这个串就不同，跟最后修改时间没有关系，所以能很好的补充Last-Modified的问题.
2. 浏览器再次(第二次+)跟服务器请求这个资源时，在request的header上加上If-None-Match的header，这个header的值就是上一次请求时返回的ETag的值。
3. 服务器再次(第二次+)收到资源请求时，根据浏览器传过来If-None-Match和服务器根据资源生成一个新的ETag对比，如果这两个值相同就说明资源没有变化，否则就是有变化；与Last-Modified不一样的是，当服务器返回304 Not Modified的响应时，由于ETag重新生成过，response header中还会把这个ETag返回，即使这个ETag跟之前的没有变化
4. 浏览器收到304的响应后，就会从缓存中加载资源。
5. 浏览器收到200的响应后，则从服务器加载新资源时，ETag在重新加载的时候会被更新，下次请求时，If-None-Match会启用上次返回的ETag值。