整理- 缓存
前言
浏览器缓存就是把一个请求过的web资源，存储在浏览器中。等下次在访问相同的请求时，缓存会根据缓存机制去决定要不要向服务器发送请求，或者直接用缓存的资源响应访问。
浏览器缓存一般包含有
1.http协议缓存 2.cookie 3.session 4.sessionStorage 5.localStorage 6.indexDB
优点：
1.加快页面打开速度 2.降低服务器压力（减少对服务器的请求） 3.减少网络宽带的消耗，省宽带费
缺点：
缓存存于内存中，没有清理机制，所以在开发过程中，要在适当的位置清理缓存对象，否则久而久之，文件多了之后会爆满整个硬盘。
一、http协议缓存
用户发起请求，判断是否有缓存，在判断缓存是否过期，若无过期则直接响应缓存的资源，若已过期则重新请求服务器资源。
规则：（关键字段：http报文，header中）
1.强制缓存
expires： 服务端返回的到期时间(属于http 1.0版，但现在的浏览器默认使用http 1.1版，会被Cache-Control代替) Cache-Control：用于定义所有的缓存机制都必须遵循的缓存指示 值： public ， private ， no-cache(表示不缓存) ， no-store max-age（值为0表示不用缓存），s-maxage，must-revalidate
Cache-Control中设定的时间会覆盖Expires中指定的时间
2.对比缓存（需要先进行比较判断是否可以使用缓存）
浏览器第一次请求数据时，服务器会将缓存标识与数据一起返回给浏览器，浏览器将2者备份到缓存数据库中。当第二次发起请求时，将备份的缓存标识发送给服务器，服务器判断次缓存标识。判断成功后会返回403状态码，表示对比成功，可以使用缓存的数据展示。
Last-Modified：服务器在响应请求时，告诉浏览器资源的最后修改时间。 If-Modified-Since：客户端存取的该资源最后一次修改的时间，同Last-Modified。 ETag：响应中资源的校验值，在服务器上某个时段是唯一标识的。 If-None-Match：客户端存取的该资源的检验值，同ETag。 Date：服务器的时间
二、cookie
cookie是由服务端发给客户端的特殊信息，而这些信息以文本文件的方式存放在客户端，然后客户端每次请求服务端时都会自动带上这些特殊信息（放置于http响应头部）。
以 名/值 类型存储: username = jane
path: 可以访问此cookie的页面路径。
domain: 可以访问该cookie的域名
如果设置为”.google.com”,则所有以”google.com”结尾的域名都可以访问该Cookie。注意第一个字符必须为“.”
expires: 失效时间。
为正数，则Cookie在maxAge秒之后失效。
为负数，该Cookie为临时Cookie，关闭浏览器即失效，浏览器也不会以任何形式保存Cookie。
为0，表示删除Cookie。默认是-1
size: cookie的大小
http: cookie的httponly属性。
为true，则只有在http请求头中会带有此cookie的信息，而不能通过document.cookie来访问此cookie。
secure: 是否只能通过https来传递此条cookie使用：
1.设置：
document.cookie = "name=Jonh; ";
多个：
document.cookie = "name=Jonh; expires=Thu, 18 Dec 2013 12:00:00 GMT; path=/";
2.修改：
document.cookie = "name=John Smith; expires=Thu, 18 Dec 2013 12:00:00 GMT; path=/";
要想修改一个cookie，只需要重新赋值就行，旧的值会被新的值覆盖。但要注意一点，在设置新cookie时，path/domain这几个选项一定要与旧cookie保持一样。否则不会修改旧值，而是添加了一个新的 cookie。
3.删除：
document.cookie = "name=John Smith; expires=Thu, 18 Dec 2013 12:00:00 GMT; path=/";
要想修改一个cookie，只需要重新赋值就行，旧的值会被新的值覆盖。但要注意一点，在设置新cookie时，path/domain这几个选项一定要与旧cookie保持一样。否则不会修改旧值，而是添加了一个新的 cookie。
4.获取：
const cookieArr = document.cookie.split(';');三、session
在web开发中，需要保存用户数据时，服务器可以为每个用户浏览器创建一个session对象（默认情况下一个浏览器独占一个session对象），并把数据写入session对象。当用户使用浏览器访问其他程序时，其他程序可以从用户的session中取出该用户的数据。
1.session与cookie的区别：
- cookie是把用户的数据写给用户的浏览器
- session是把用户的数据写到用户独占的session中
- session对象是由服务器创建。
2.session与cookie 的关系：
- 服务端执行session机制
- 生成唯一的session_id
- 服务端将session_id发送给客户端
- 客户端接收到session_id，以cookie作为保存容器存储起来
- 客户端每次请求的时候将会带上session_id
- 服务端解析session
四、sessionStorage-临时存储
sessionStorage是html5新增的会话存储对象。用于临时保存同一窗口下的数据，窗口关闭后会删除这些数据。
1.特点
- 只在本地存储，不会跟随http请求一起发送到服务器
- 存储方式：采用key、value的方式，value的值必须为字符串
- 存储限制为5MB
- 单标签页限制。sessionStorage操作限制在单个标签页中，在此标签页进行同源页面访问都可以共享sessionStorage数据。
- 同源策略：想在不同页面之间对同一个sessionStorage进行操作，这些页面就必须在同一协议、同一主机、同一端口下。(IE 8和9存储数据仅基于同一主机名，忽略协议（HTTP和HTTPS）和端口号的要求)
2.使用
1.存储:
sessionStorage.setItem('testKey','value');
or
sessionStorage['testKey'] = 'value';
2.读取：
sessionStorage.getItem('testKey');
or
sessionStorage['testKey'];
3.删除：
删除所有：sessionStorage.clear();
删除某个： sessionStorage.removeItem('testKey');五、localStorage-长期存储
同sessionStorage一样，localStorage也是html5新加的一个特性。与sessionStorage所不同的是，localStorage是长期存储，浏览器关闭后，数据依然会存在。
使用方法与sessionStorage相同
1.存储:
localStorage.setItem('testKey','value');
2.读取：
localStorage.getItem('testKey');
or
localStorage.['testKey'];
3.删除：
删除所有：localStorage.clear();
删除某个： localStorage.removeItem('testKey');兼容性：localStorage与localStorage都支持ie8+，大部分浏览器都支持
六、indexedDB
indexedDB是在浏览器保存结构化数据中的一种数据库。
sessionStorage与localStorage 是简单的存储字符串健值对，但是对于大量的结构化数据的存储就比较不合适了。所以indexedDB是为了可以在客户端存储大量的结构化数据而存在的，并且使用索引高效检索的api。
大小限制：
每个浏览器都不一样，firefox 无限制，Google Chrome每条记录大小不超过130MB
教程：https://www.cnblogs.com/steph...
参考：
https://www.cnblogs.com/xdp-g...