前端缓存
缓存的重要性：
因为一个网站打开网页的速度直接关系到用户体验，用户粘度，而提高网页的打开速度有很多方面需要优化，其中比较重要的一点就是利用好缓存，缓存文件可以重复利用，还可以减少带宽，降低网络负荷。
Http缓存
-
浏览器每次发起请求，都会先在浏览器缓存中查找该请求的结果以及缓存标识
-
浏览器每次拿到返回的请求结果都会将该结果和缓存标识存入浏览器缓存中
Http缓存包括强缓存和协商缓存
1.强缓存
控制强制缓存的字段分别是Expires和Cache-Control，其中Cache-Control优先级比Expires高。
Expires
Expires是HTTP/1.0控制网页缓存的字段，其值为服务器返回该请求结果缓存的到期时间，即再次发起该请求时，如果客户端的时间小于Expires的值时，直接使用缓存结果。
到了HTTP/1.1，Expire已经被Cache-Control替代，原因在于Expires控制缓存的原理是使用客户端的时间与服务端返回的时间做对比，那么如果客户端与服务端的时间因为某些原因（例如时区不同；客户端和服务端有一方的时间不准确）发生误差，那么强制缓存则会直接失效。
Cache-Control
在HTTP/1.1中，Cache-Control是最重要的规则，主要用于控制网页缓存，主要取值为：
-
public：所有内容都将被缓存（客户端和代理服务器都可缓存）
-
private：所有内容只有客户端可以缓存，Cache-Control的默认取值
-
no-cache：客户端缓存内容，但是是否使用缓存则需要经过协商缓存来验证决定
-
no-store：所有内容都不会被缓存，即不使用强制缓存，也不使用协商缓存
-
max-age=xxx (xxx is numeric)：缓存内容将在xxx秒后失效
HTTP响应报文中expires的时间值，是一个绝对值
HTTP响应报文中Cache-Control为max-age=600，是相对值
浏览器的缓存存放在哪里，如何在浏览器中判断强制缓存是否生效？https://juejin.im/entry/5ad86c16f265da505a77dca4
2.协商缓存
协商缓存就是强制缓存失效后，浏览器携带缓存标识向服务器发起请求，由服务器根据缓存标识决定是否使用缓存的过程。
协商缓存生效，返回304
协商缓存失效，返回200和请求结果
同样，协商缓存的标识也是在响应报文的HTTP头中和请求结果一起返回给浏览器的，控制协商缓存的字段分别有：
- Last-Modified / If-Modified-Since
- Etag / If-None-Match
其中Etag / If-None-Match的优先级比Last-Modified / If-Modified-Since高。
Last-Modified / If-Modified-Since
Last-Modified是服务器响应请求时，返回该资源文件在服务器最后被修改的时间，如下。
If-Modified-Since则是客户端再次发起该请求时，携带上次请求返回的Last-Modified值，通过此字段值告诉服务器该资源上次请求返回的最后被修改时间。服务器收到该请求，发现请求头含有If-Modified-Since字段，则会根据If-Modified-Since的字段值与该资源在服务器的最后被修改时间做对比，若服务器的资源最后被修改时间大于If-Modified-Since的字段值，则重新返回资源，状态码为200；否则则返回304，代表资源无更新，可继续使用缓存文件，如下。
Etag / If-None-Match
Etag是服务器响应请求时，返回当前资源文件的一个唯一标识(由服务器生成)，如下。
If-None-Match是客户端再次发起该请求时，携带上次请求返回的唯一标识Etag值，通过此字段值告诉服务器该资源上次请求返回的唯一标识值。服务器收到该请求后，发现该请求头中含有If-None-Match，则会根据If-None-Match的字段值与该资源在服务器的Etag值做对比，一致则返回304，代表资源无更新，继续使用缓存文件；不一致则重新返回资源文件，状态码为200，如下。
清除缓存
浏览器默认会缓存图片，css和js等静态资源，所以开发环境下经常会因为强缓存导致资源没有及时更新而看不到最新的效果。
解决方法：
- 直接ctrl+f5，这个办法能解决页面直接引用的资源更新的问题；
- 使用ctrl+shift+delete清除缓存；
- 如果用的是chrome，可以F12在network那里把缓存给禁掉，选中“disable Cache”：
- 给资源文件加一个时间戳；
- 禁止修改html中的缓存字段为禁止使用；
- 在谷歌浏览器刷新按钮上，点击右键，选择“清空缓存并硬性重新加载”；
3.总结
强制缓存优先于协商缓存进行，若强制缓存(Expires和Cache-Control)生效则直接使用缓存，若不生效则进行协商缓存(Last-Modified / If-Modified-Since和Etag / If-None-Match)，协商缓存由服务器决定是否使用缓存，若协商缓存失效，那么代表该请求的缓存失效，重新获取请求结果，再存入浏览器缓存中；生效则返回304，继续使用缓存，主要过程如下：
本地存储
本地存储主要有以下几种，localStorage，sessionStorage和cookie，WebSql和IndexDB主要用在前端有大容量存储需求的页面上，例如，在线编辑浏览器或者网页邮箱。他们都可以将数据存储在浏览器，应该根据不同的场景进行使用。
1.Cookie
Cookie主要是由服务器生成，且前端也可以设置，保存在客户端本地的一个文件，通过response响应头的set-Cookie字段进行设置，且Cookie的内容自动在请求的时候被传递给服务器。如下：
[HTTP/1.1 200 OK]
Server:[bfe/1.0.8.18]
Etag:["58860415-98b"]
Cache-Control:[private, no-cache, no-store, proxy-revalidate, no-transform]
Connection:[Keep-Alive]
Set-Cookie:[BDORZ=27315; max-age=86400; domain=.baidu.com; path=/]
Pragma:[no-cache]
Last-Modified:[Mon, 23 Jan 2017 13:24:37 GMT]
Content-Length:[2443]
Date:[Mon, 09 Apr 2018 09:59:06 GMT]
Content-Type:[text/html]
Cookie包含的信息：
它可以记录你的用户ID、密码、浏览过的网页、停留的时间等信息。当你再次来到该网站时，网站通过读取Cookies，得知你的相关信息，就可以做出相应的动作，如在页面显示欢迎你的标语，或者让你不用输入ID、密码就直接登录等等。一个网站只能读取它自己放置的信息，不能读取其他网站的Cookie文件。因此，Cookie文件还保存了host属性，即网站的域名或ip。
这些属性以名值对的方式进行保存，为了安全，它的内容大多进行了加密处理。Cookie文件的命名格式是：用户名@网站地址[数字].txt
Cookie的优点：
给用户更人性化的使用体验，如记住“密码功能”、老用户登录欢迎语
弥补了HTTP无连接特性
站点统计访问人数的一个依据
Cookie的缺点：
它无法解决多人共用一台电脑的问题，带来了不安全因素
Cookie文件容易被误删除
一人使用多台电脑
Cookies欺骗。修改host文件，可以非法访问目标站点的Cookie
容量有限制，不能超过4kb
在请求头上带着数据安全性差
2. localStorage
localStorage主要是前端开发人员，在前端设置，一旦数据保存在本地后，就可以避免再向服务器请求数据，因此减少不必要的数据请求，减少数据在浏览器和服务器间不必要地来回传递。
可以长期存储数据，没有时间限制，一天，一年，两年甚至更长，数据都可以使用。
localStorage中一般浏览器支持的是5M大小，这个在不同的浏览器中localStorage会有所不同
优点：
localStorage拓展了cookie的4k限制
localStorage可以将第一次请求的5M大小数据直接存储到本地，相比于cookie可以节约带宽
localStorage的使用也是遵循同源策略的，所以不同的网站直接是不能共用相同的localStorage
缺点：
需要手动删除，否则长期存在
浏览器大小不一，版本的支持也不一样
localStorage只支持string类型的存储，JSON对象需要转换
localStorage本质上是对字符串的读取，如果存储内容多的话会消耗内存空间，会导致页面变卡
3.sessionStorage
sessionStorage主要是前端开发人员，在前端设置，sessionStorage（会话存储），只有在浏览器被关闭之前使用，创建另一个页面时同意可以使用，关闭浏览器之后数据就会消失
存储上限限制：不同的浏览器存储的上限也不一样，但大多数浏览器把上限限制在5MB以下
4.websql
Web SQL 是在浏览器上模拟数据库，可以使用JS来操作SQL完成对数据的读写。它使用 SQL 来操纵客户端数据库的 API，这些 API 是异步的，规范中使用的方言是SQLlite。数据库还是在服务端，不建议使用，已废弃
5.indexDB
随着浏览器的功能不断增强，越来越多的网站开始考虑，将大量数据储存在客户端，这样可以减少从服务器获取数据，直接从本地获取数据。
现有的浏览器数据储存方案，都不适合储存大量数据：Cookie 的大小不超过4KB，且每次请求都会发送回服务器；LocalStorage 在 2.5MB 到 10MB 之间（各家浏览器不同），而且不提供搜索功能，不能建立自定义的索引。所以，需要一种新的解决方案，这就是 IndexedDB 诞生的背景。
通俗地说，IndexedDB 就是浏览器提供的本地数据库，它可以被网页脚本创建和操作。IndexedDB 允许储存大量数据，提供查找接口，还能建立索引。这些都是 LocalStorage 所不具备的。就数据库类型而言，IndexedDB 不属于关系型数据库（不支持 SQL 查询语句），更接近 NoSQL 数据库。