浏览器存储与缓存机制

·  阅读 738
浏览器存储与缓存机制

前言

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

浏览器存储与缓存机制.png

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

生成方式

由服务端生成,存储在客户端,用来维持状态 cookie.png

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.浏览器缓存机制

将已访问过的资源进行缓存,以便下次访问时,能直接访问,减少请求次数,减少带宽,从而更快地加载页面。 浏览器缓存机制.png

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::不允许在客户端存储,每次都要从服务器请求新的资源。

2.3 协商缓存

如果未命中强缓存,即强缓存失效(可能是Cache-Control设置了no-store或no-cache),则判断协商缓存。

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

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

由于服务器更新资源的时间单位为秒,即无法识别一秒内进行多次修改的情况。如果资源更新的速度不到1ms,则无法生成新的最后修改时间。所以出现了一组新的字段EtagIf-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和数据。

分类:
前端
标签:
分类:
前端
标签: