前端缓存

前言

前端缓存主要分为http缓存和浏览器缓存，http缓存是http请求时的缓存，在服务器上进行设置；浏览器缓存主要有前端在前端js上进行设置。

一、http缓存

1、强缓存
当浏览器向服务器发送请求时，服务器会将缓存规则放入http响应报文的http头中和请求结果一起返回给浏览器，强缓存的控制字段分别是expires和Cache-Control ，Cache-Control优先级要比Expires高。
expries值为该请求结果的缓存到期时间
Cache-Control：主要用于控制网页缓存，主要取值为：

• public：所有内容都将被缓存
• private：默认取值，所有内容只有客户端可以缓存
• no-cache：客户端缓存内容，是否使用缓存由协商决定
• no-store: 所有内容都不会缓存
• max-age: 设置缓存内容过期的相对时间

res.setHeader('Expires',new Date(Date.now()+10*1000).toGMTString())
res.setHeader('Cache-Control','max-age=10')

2、协商缓存
协商缓存就是强制缓存失效后，浏览器携带缓存标识符向服务器发起请求，有服务器根据缓存标识符决定是否使用缓存
（1）协商生效 返回304 从缓存中读取

（2）协商失效，返回200和请求结果
协商缓存的标识符也是在响应报文的http头中和请求结果一起返回，控制协商缓存的主要字段有：

• Last-Modified：服务器响应请求时，返回该资源文件在服务器最后被修改的时间
• If-Modified-Since：If-Modified-Since则是客户端再次发起该请求时，携带上次请求返回的Last-Modified值，通过此字段值告诉服务器该资源上次请求返回的最后被修改时间。服务器收到该请求，发现请求头含有If-Modified-Since字段，则会根据If-Modified-Since的字段值与该资源在服务器的最后被修改时间做对比，若服务器的资源最后被修改时间大于If-Modified-Since的字段值，则重新返回资源，状态码为200；否则则返回304，代表资源无更新，可继续使用缓存文件

let statObj= await fs.stat(absPath)//读取文件状态
let ctime = statObj.ctime.toGMTString()//文件最后修改时间
res.setHeader('Last-Modified',ctime)//设置
let ifModifiedSince =req.headers['if-modified-since']//获取
if(ifModifiedSince===ctime){
    res.statusCode=304
    return res.end()//直接返回
}

某些文件的修改非常的频繁，在秒以内修改n多次， If-Modified-Since能检查到的粒度是s级的，这种修改是无法判断的

• etag：每个文件有一个，改动文件了就变了，就是个文件hash，每个文件唯一，就像用webpack打包的时候，每个资源都会有这个东西。
• If-None-Match
  服务器可以为文档提供特殊的标签(ETag),而不是将其与最近修改日期向匹配,这些标签就像序列号一样。如果已缓存标签与服务器文档中的标签有所不同,If-None-Match首部就会执行所请求的方法

一、浏览器缓存

cookies
cookies其实是存储在浏览器端的纯文本，cookies的内容可以自动在请求的时候传递给服务器
js原生API提供了获取cookie的方法：document.cookie
设置cookies的方法：document.cookie = “name=huang; secure”;
删除cookie只要重新给cookie赋值，或将expries设置为一个过期的时间就可以

LocalStroage
数据将一直保存在浏览器内，直到用户清除浏览器缓存数据为止
- 存入数据：window.localStorage.setItem(‘key’, ‘value’)
- 用于读取数据：window.localStorage.getItem(‘key’)
- 清除某个键名对应的键值：localStorage.removeItem(‘key’)
- 用于清除所有保存的数据：window.localStorage.clear()
localStorage只要在相同的协议、相同的主机名、相同的端口下，就能读取/修改到同一份localStorage数据。localStorage理论上来说是永久有效的，即不主动清空的话就不会消失

SessionStorage
SessionStorage的其他属性同LocalStorage，只不过它的生命周期同标签页的生命周期，当标签页被关闭时，SessionStorage也会被清除