什么是缓存？
缓存可以认为是资源的副本。它与本地缓存localStorage等不一样，本地缓存更多的是数据记录，数据量小；而缓存是为了减少请求，多用于文件，存储量大。
前端缓存主要可以分为http缓存和浏览器缓存。
这里先解释一下后面会出现的词
- 命中缓存：访问的数据在缓存中
http缓存
什么是http缓存
http缓存其实就是：当客户端向服务器端发送请求的时候，会先访问浏览器缓存，如果浏览器缓存中有请求的资源，那就不向服务器发送请求，而使用缓存的资源。
这里涉及到了浏览器加载一个页面的流程，简单来说就是：
- 浏览器判断http请求头中的信息，看是否命中强缓存，如果命中就去缓存里找，而不向服务器端发送请求；
- 如果强缓存命中失败，则会进行协商缓存，也就是浏览器会发送请求到服务器端，服务器会判断浏览器本地缓存是否失效。如果未失效，则服务器会返回304，浏览器继续加载缓存的资源；
- 如果未命中协商缓存，则服务器会返回完整的请求资源信息给浏览器，浏览器加载新资源，并且更新缓存。
http缓存可以分为强缓存和协商缓存：
什么是强缓存？
强缓存是利用http请求头的Cache-Control和expires两个字段控制的，表示资源过期的时间。
命中强缓存时，浏览器是不会向服务端发送请求的。然后返回的状态码是200，这种速度很快，性能也很好。但是有些时候我们可能改了一些样式，刷新发现页面一点变化都没有，就是因为强缓存导致的，这时我们可以按Ctrl+F5进行强制刷新。
- Cache-Control
缓存的相对时间，比如说Cache-Control:3600,就是指改资源被缓存的时间为3600秒，过后就失效了。
- Expires
指缓存的过期时间，一旦超过这个时间点，缓存就失效了。
当这两者同时存在的时候，Cache-Control的优先级要高些。
（Pragma是http1.0存在的，在http1.1中被废弃了，如果三者同时存在，Pragma的优先级是最高的）
什么是协商缓存？
浏览器发送请求给服务器，服务器会根据http请求头的Last-Modify/If-Modify-Since或Etag/If-None-Match判断对比资源是否更新了，这可以当作是浏览器和服务器的协商过程，如果服务器的资源较上次没有修改，http状态码返回304，浏览器从缓存中加载资源。如果修改了，则返回状态码200，并且将更新后的资源以及缓存信息一起返回。
- Last-Modify/If-Modify-Since
Last-modify/If-Modify-Since是一个时间标识该资源的最后修改时间，是检查服务器端资源是否更新的一种方式。
- Etag/If-None-Match
Etag/If-None-Match返回的是一个校验码（ETag: entity tag）。ETag可以保证每一个资源是唯一的，资源变化都会导致ETag变化*。ETag值的变更则说明资源状态已经被修改。
执行流程是这样子的：
当浏览器第一次向服务器发送http请求时，会在响应头返回Last-Modify和ETag；然后浏览器在第二次向服务器发送请求的时候会在请求头带上与ETag对应的If-None-Match，以及与Last-Modify对应的If-Modify-Since。服务器接收到请求之后，会对这两个参数进行对比，如果返回状态码为304，则说明资源没有被修改。
浏览器缓存
浏览器缓存包括了cookie,WebStorage(LocalStorage,SessionStorage)等。
cookie
cookies是保存在客户端的纯文本信息，主要用于用户信息的存储，容量为4KB。
用法
创建 cookie
document.cookie="username=John Doe";给cookie添加过期时间
document.cookie="username=John Doe; expires=Thu, 18 Dec 2043 12:00:00 GMT";通过path参数告诉浏览器cookie的路径
document.cookie="username=John Doe; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/";读取cookie
var ck = document.cookie // 以文本方式返回所有cookielocalStorage
localStorage的数据一直保存在浏览器，直到用户手动清除浏览器缓存为止，容量为5MB。
用法
var localStorage = window.localStorage存储数据
localStorage.setItem("name","caibin") //存储名字为name值为caibin的变量
localStorage.name = "caibin"; // 等价于上面的命令读取数据
localStorage.getItem("name") //caibin,读取保存在localStorage对象里名为name的变量的值
localStorage.name // "caibin"
localStorage.valueOf() //读取存储在localStorage上的所有数据
localStorage.key(0) // 读取第一条数据的变量名(键值)
//遍历并输出localStorage里存储的名字和值
for(var
i=0; i删除数据
localStorage.removeItem("name"); //undefined清空localStorage
localStorage.clear()sessionStorage
sessionStorage与localStorage属性相同，不同的是在关闭当前页面时，它就会被清除。
用法与localStorage一致