1. 由后端通过 response 响应头设置的缓存

1.1 强缓存

1.1.1 什么是强缓存

所谓的强缓存是指将由后台返回过来的文件存储到本地, 当再次请求相同文件时, 不用再去向服务器去发送请求, 而是先查看缓存中的相应文件, 只要文件不过期, 则会用缓存中的文件来回应请求; 而若是过期了, 就仍需要再次请求服务器

1.1.2 如何设置强缓存

有两种设置强缓存的方法, 分别是基于 HTTP/1.0 和 HTTP/1.1 两种协议

• expires(HTTP/1.0):
  • 通过设置 HTTP响应头中的 expires 属性可以为相应的文件设置强缓存.
  • 其格式一般是 expires: Wed, 05 Oct 2022 18:53:11 GMT
    • 右边的值即为该文件的到期时间(格林时间)
    • 只要将格林时间设置为比当前时间更早就表示不设置强缓存
• cache-control(HTTP/1.1):
  • 通过设置 HTTP响应头中的 cache-control 属性可以为相应的文件设置强缓存.
  • 其格式一般是 cache-control: max-age=600
    • 这里的 max-age 对应的是在缓存中保留的时间, 600 表示保留 600s
    • 若是 cache-control 所对应的值为 no-cache 则表示不设置强缓存

如果 expires 和 cache-control 都设置了, 则以 cache-control 为准

1.1.3 文件的请求流程

1.2 协商缓存

1.2.1 什么是协商缓存

若一个文件被协商缓存在本地, 则当浏览器需要请求该文件时, 其会将缓存中文件的过期时间/标识发送给服务器, 若服务器确认文件没有失效, 返回 304 时, 浏览器会从本地缓存中取出该文件来响应请求

1.2.2 如何设置协商缓存

有两种方法设置协商缓存, 分别基于 HTTP/1.0 和 HTTP/1.1

• last-modified(HTTP/1.0):
  • 通过设置响应头的 last-modified 属性, 可以为相应的文件设置协商缓存
  • 其格式一般是 last-modified: Tue, 27 Sep 2022 05:31:33 GMT
    • 右边的值是该文件的过期时间(格林时间)
    • 只要将格林时间设置为比当前时间更早就表示不设置协商缓存
• etag(HTTP/1.1):
  • 通过设置响应头的 etag 属性, 可以为相应的文件设置协商缓存
  • 其格式一般是 etag: 9de6JuprLuBFrz3sp6HXvQ==
    • 右边的值是后台为该文件生成的唯一标识符

2. 可以由前端开发者设置的缓存

2.1 localStorage

2.2 sessionStorage

2.3 cookie (为确保安全, 最好不要让前端能够访问到 cookie)