必考知识（中）

（1）、HTTP缓存：主要分为强缓存与协商缓存

• 强缓存

强可理解为强制的意思，当浏览器去请求某个文件的时候，服务端就在respone header里面对该文件做了缓存配置。缓存的时间、缓存类型都由服务端控制，具体由 respone header 的cache-control 控制，常见的设置是max-age public private no-cache no-store等，各类设置对应情况：

a、cache-control: max-age=xxxx，public

客户端和代理服务器都可以缓存该资源，客户端在xxx秒的有效期内，如果有请求该资源的需求的话就直接读取缓存，statu code200 ，如果用户做了刷新操作，就向服务器发起http请求

b、cache-control: max-age=xxxx，private

只让客户端可以缓存该资源；代理服务器不缓存，客户端在xxx秒内直接读取缓存，statu code:200

c、cache-control: max-age=xxxx，immutable

客户端在xxx秒的有效期内，如果有请求该资源的需求的话就直接读取缓存，statu code:200 ，即使用户做了刷新操作，也不向服务器发起http请求

d、cache-control: no-cache

跳过设置强缓存，但不妨碍设置协商缓存；通常做了强缓存，只有强缓存失效了才走协商缓存的，设置了no-cache就不会走强缓存了，每次请求都回询问服务端

e、cache-control: no-store

不缓存，客户端、服务器都不缓存

• 协商缓存

可理解为强缓存就是为资源设置一个有效时间，每次请求资源时都会检查是否过期，只有过期才会去请求服务器（可有效减少请求次数），当强制缓存失效后，浏览器携带缓存标识向服务器发起请求，由服务器根据缓存标识决定是否使用缓存的过程协商缓存生效，返回304和Not Modified

在 response header里面的设置etag、last-modified

etag：每个文件具有唯一一个“标识”

last-modified：文件的修改时间，精确到秒

每次请求返回携带response header中的etag和last-modified，在下次请求时request header也会带上，服务端对比etag标识，判断资源是否更改，如更改直接返回新的资源，并更新response header的etag、last-modified，如资源不变，etag、last-modified不变，对客户端来说，每次请求都进行了协商缓存，即：

发请求-->资源是否过期？-->过期（没过期为强缓存）-->请求服务器-->服务器对比资源是否真的过期？-->没过期-->返回304状态码-->客户端用缓存的老资源

当服务端发现资源过期时：

服务器对比资源是否真的过期-？->过期-->返回200状态码-->客户端像第一次接收该资源一样，记录cache-control中的max-age、etag、last-modified等信息

（2）、本地存储

主要有：localStorage，sessionStorage和cookie，WebSql和IndexDB主要用在前端有大容量存储需求的页面上，如在线编辑浏览器或者网页邮箱，可以将数据存储在浏览器，应该根据不同的场景进行使用

• Cookie

由服务器生成，且前端也可设置，保存在客户端本地的一个文件，通过response header的set-Cookie字段进行设置，且Cookie的内容自动在请求的时候被传递给服务器

其中包含的信息：

a、用户ID、密码、浏览过的网页、停留的时间等信息，当该用户再打开该网站时，网站通过读取Cookie，就可以做出相应的动作，如身份校验、提示语等

b、还保存host属性，即网站的域名或ip，一个网站只能读取它自己放置的信息，不能读取其他网站的Cookie文件

Cookie 优点：给用户更人性化