整理- 缓存

前言

浏览器缓存就是把一个请求过的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://segmentfault.com/a/11...

https://www.cnblogs.com/xdp-g...

https://www.cnblogs.com/polk6...

https://www.cnblogs.com/steph...