浏览器存储与缓存机制

前言

自我总结，若有不对的地方，还望各位指出。

1.浏览器存储

1.1 cookie

HTTP协议的一种无状态协议，当请求服务器时，HTTP请求都需要携带cookie，用来验证用户身份。

cookie的构成：

 1. 名称（name）
 2. 值（value）
 3. 域（Domain）
 4. 值（value）
 5. 路径（Path）
 6. 失效时间（Expiers/Max-Age）
 7. 大小（Size）
 8. 是否为 HTTP请求（HttpOnly）
 9. 安全性（Secure）
 
 提示：域、路径、失效时间和安全性都是服务器给浏览器的指示，它们不会随着请求发送给服务器，发送给服务器的只有名称与值对。
复制代码

cookie的限制：

• 可以设置有过期时间；若没有设置，则和session一个级别，关闭浏览器则消失。

cookie的优缺点：

• [ 优点：]

1. 可以控制过期时间，不会永久有效，有一定的安全保障。
2. 可进行扩展，可跨域共享。
3. 通过加密与安全传输技术 （SSL） ，可以减少 Cookie 被破解的可能性。
4. 有较高的兼容性。

• [ 缺点：]
• 有一定的数量与长度限制，每个 Cookie 长度不能超过 4 KB ，否则超出部分会被截掉。
• 请求头上的数据容易被拦截攻击。
• 单个cookie大小不超过4kb，很多浏览器都限制一个站点最多保存20个cookie

生成方式

由服务端生成，存储在客户端，用来维持状态

1.2 web Storage

H5可以在本地存储用户的浏览数据，以前用cookie，但是web Storage更快速、安全。可以存储大量的数据，而不影响网站性能，以键/值对存在。

web Storage分为两种：sessionStorage和localStorage。sessionStorage将数据存储在session中，当浏览器关闭就会消失，而localStorage会把数据一直存在客户端本地。其API提供的方法：

• setItem (key, value) —— 保存数据，以键值对的方式存储。

• getItem (key) —— 读取数据，传入键值（key），获得对应的值（value）。

• removeItem (key) —— 删除某个数据，删除键值对。

• clear () —— 删除所有数据。

• key (index) —— 获取某个索引的key

sessionStorage

- 大小5Mb
- 页面刷新数据不会消失，页面关闭就消失。
- 不可以跨页面（仅在当前页面使用）。
- 使用window.open打开页面和改变location.href方式可以获取到sessionStorage 内部的数据。
复制代码

• [ 使用场景：]

  1. 主要针对会话级的小数据的存储。

  2. 存储一些在当前页面刷新仍然需要存储，但是关闭后不需要留下的信息。

  3. 很适合单页应用的使用，可以用来存储登录态信息等。

localStorage

- 大小5Mb
- 可以跨页面。
- 永久存储，需要手动删除。。
- 使用window.open打开页面和改变location.href方式可以获取到sessionStorage内部的数据。
复制代码

• [ 使用场景：]

  1. 持久性的保存客户端数据，只能通过 JavaScript 删除或者用户清除浏览器缓存。

  2. 如果有一些稍大量的数据，例如编辑器的自动保存等。

  3. 多页面间访问共同数据。 sessionStorage 只能用于一个标签页，而localStorage可以在多个标签页之间共享。

2.浏览器缓存机制

2.1 HTTP相关的Header

- Expires: 响应头, 该资源的过期时间。

- Cache-Control: 请求头/响应头, 缓存控制字段。

- Etag (HTTP1.1): 响应头, 资源标识，服务器存储，资源被修改后，Etag也会随之发生变化。

- lf-None-Match (HTTP1.1): 请求头, 服务器会将If-None-Match与被请求资源的最新ETag进行比对。

- Last-Modified (HTTP1.0) : 响应头，资源最后一次修改时间。

- If-Modified-Since (HTTP1.0) : 请求头,资源最后一次修改时间(后面详情）。

缺陷：
    1. 如果资源更新的速度是秒以下单位，那么该缓存是不能被使用的，因为它的时间单位最低是秒。
    2. 如果文件是通过服务器动态生成的，那么该方法的更新时间永远是生成的时间，尽管文件可能没有变化，所以起不到缓存的作用。。

2.2 强缓存

判断是否过期（服务器会通知浏览器一个缓存时间，相关头部信息在Cache-Control和Expires中），如果时间未过期，则直接从缓存中取，即“强缓存”；

Expires

HTTP1.0使用的字段，表示缓存的到期时间，即有效时间+当时服务器的时间。

缺陷:

用户可以修改客户端本地时间，而导致浏览器判断缓存失效，重新请求该资源，同时，还导致客户端与服务器的时间不一致，导致缓存失效。

Cache-control

• max-age：设置缓存的最大周期，与Expires相反，时间是相对于请求的时间。

• s-maxage: 和max-age相同，仅用于共享缓存，如CDN缓存。

• public：相应可以被任何对象缓存，即使是通常不可缓存的内容。

• private：缓存只能被单个用户缓存，不能作为共享缓存（即代理服务器不可缓存）。

• no-cache: 可以缓存在客户端，但每次都必须去服务器检查新鲜度，来决定从服务器获取最新资源（200）还是读取缓存（304），即协商缓存。

• no-store:：不允许在客户端存储，每次都要从服务器请求新的资源。

Last-Modified & If-Modified-Since(HTTP1.0)

请求头,资源最后一次修改时间；再次请求时，服务器会把If-Modified-Since 和Last-Modified字段进行对比。相同，则表示未修改，返回304状态码；不同，则表示修改了，返回数据和200状态码

2.3 协商缓存

由于服务器更新资源的时间单位为秒，即无法识别一秒内进行多次修改的情况。如果资源更新的速度不到1ms，则无法生成新的最后修改时间。所以出现了一组新的字段Etag和If-None-Match。

Etag & If-None-Match (HTTP1.1):

Etag是HTTP1.1的属性，由服务器生成并返回给客户端。优先级高于Last-Modified。

第一次发起HTTP请求时，服务器返回一个Etag。

第二次发起同一个请求时，客户端会发送一个If-None-Match,它的值就是Etag，服务器就会把这个Etag和服务器的Etag进行比较。

如果相同，就将If-None-Match的值设置为false,返回304，使用缓存；如果不同，就将If-None-Match的值设置为true，返回200和数据。