HTTP缓存和浏览器缓存

前端缓存分为浏览器缓存以及HTTP缓存。
其中作为前端我们用的最多的是浏览器缓存。
浏览器缓存包括以下三个部分：

cookie localStorage sessionStorage

cookie

cookie是为了让客户端与服务器进行会话或者通讯而使用的一项技术，cookie能存储的大小十分有限大概只有4kb，应用的场景包括记录用户当前的登录状态，购物车的商品信息，或者是用户的访问次数等。客户端请求服务器的时候，如果需要记录下来当前的用户状态，服务器就会使用response向客户端颁发一个代表状态的cookie。在之后的请求中就可以带上这个cookie，服务器通过检查cookie来确定当前用户的状态。值得注意的是cookie是可以设置过期时间的，假如没有到过期的时间，及时关掉浏览器cookie也会存在。如果没有设置过期时间，那么cookie的有限时间仅在浏览器会话期间，即关闭浏览器cookie就会失效。cookie可以在所有同源的窗口共享。

localStorage

localStorage与cookie最显著的不同的地方是生命周期。localStorage如果不是手动去清除的话，那么生命周期将会是永久，它的存储大小大概有5MB左右。localStorage不会主动参与与服务器的通讯，除非我们去操作它。localStorage可以在所有同源的窗口共享。
sessionStorage
sessionStorage的生命周期只在当前会话窗口存在期间，假如关掉了会话窗口或浏览器，sessionStorage也会被清除掉，并且它不能在不同的浏览器共享，我在页面A存储了sessionStorage，换到另外一个页面B的话也是拿不到sessionStorage，即便他们是同源的。

HTTP缓存

HTTP缓存分为协商缓存以及强缓存

强缓存

浏览器不会发送请求，直接从缓存中拉取资源。

协商缓存

浏览器在加载资源向服务器发送请求时，服务器判断当前带过来的资源版本或者资源最后一次更新时间，如果资源版本和最后一次更新时间保持一致。那么就协商告知浏览器客户端使用缓存里面的资源

HTTP缓存的流程

1. 浏览器第一次加载资源，本地没有缓存，从服务器上拉取资源存到缓存里面。一起存过来的还有过期时间，版本，以及最后一次更新时间。
2. 浏览器第二次加载资源的时候，根据过期时间判断是否已经过期，如果没有过期，则不发送请求，直接拉取缓存中的资源（强缓存）。
3. 浏览器第三次加载资源的时候，首先判断是否已经过期，假如当前已经过期了。则携带之前返回来的版本（资源只要一更新就会重新在服务端生产一个版本），资源最后一次更新时间到服务器，服务器首先判断版本是否已经更新，或者最后一次更新时间是否一致。假如版本和最后一次更新时间是一致的，就返回304，让客户端浏览器使用缓存中的资源（协商缓存）。
4. 浏览器第四次加载资源的时候，假如现在已经过期了，并且版本和最后一次时间和服务器上面存储的不一致，这个时候说明资源已经更新了，服务器就会返回最新的资源以及最新的过期时间，版本号，最后一次更新时间。

什么用户行为会触发强缓存

正常跳转网址，假如网址的资源没有过期，则使用强缓存。

什么用户行为不会触发强缓存

强制清除缓存并刷新，这个时候本地已经没有缓存了，因此会直接发起请求拉取资源，不会触发强缓存。