web缓存

这是WebStorage原文
这是HTTP缓存原文
图解 HTTP 缓存

WebStorage：

1. localStorage在本地永久性存储数据，除非显式将其删除或清空

2. sessionStorage存储的数据只在会话期间有效，关闭浏览器则自动删除

API

length:唯一的属性，只读，用来获取storage内的键值对数量。
key：根据index获取storage的键名
getItem：根据key获取storage内的对应value
setItem：为storage内添加键值对
removeItem：根据键名，删除键值对
clear：清空storage对象

var ls=localStorage;
console.log(ls.length);//0
ls.setItem('name','Byron');
ls.key(0)
ls.getItem(key)
ls.removeItem('age');
ls.clear();

事件

/*key:键值对的键
oldValue：修改之前的value
newValue：修改之后的value
url：触发改动的页面url
StorageArea：发生改变的Storage*/
window.addEventListener('storage',function(e){
      console.log(e.key+' is changed form '+e.oldValue+' to '+e.newValue+' by '+e.url );
      console.log(e.storageArea ==localStorage);
},false);

兼容性也不错

谷歌浏览器可查看

---

HTTP缓存

浏览器向服务器请求数据，发送请求(request)报文；
服务器向浏览器返回数据，返回响应(response)报文

报文信息主要分为两部分

包含属性的首部(header)	附加信息（cookie，缓存信息等）与缓存相关的规则信息，均包含在header中
包含数据的主体部分(body)	HTTP请求真正想要传输的部分

HTTP缓存规则

强制缓存优先级高于对比缓存

1. 强制缓存

   
   
   

   强制缓存

2. 对比缓存,协商缓存

   
   
   

   对比缓存
   
   
   

   HTTP缓存图示

header强缓存

• Expires

Expires 的值是一个 HTTP 日期。
在浏览器发起请求时，会根据系统时间和 Expires 的值进行比较，如果系统时间超过了 Expires 的值，缓存失效。
由于和系统时间进行比较，所以当系统时间和服务器时间不一致的时候，会有缓存有效期不准的问题。
Expires 的优先级在三个 Header 属性中是最低的。

• Cache-Control
  Cache-Control 是最重要的规则。
  常见的取值有private、public、no-cache、max-age，no-store，默认为private。

private: 客户端可以缓存
public: 客户端和代理服务器都可缓存（前端的同学，可以认为public和private是一样的）
max-age=xxx: 缓存的内容将在 xxx 秒后失效
no-cache: 需要使用对比缓存来验证缓存数据（后面介绍）
no-store: 所有内容都不会缓存，强制缓存，对比缓存都不会触发（对于前端开发来说，缓存越多越好，so...基本上和它说886）

• Pragma

Pragma 只有一个属性值，就是 no-cache ，效果和 Cache-Control 中的 no-cache 一致，不使用强缓存，需要与服务器验证缓存是否新鲜，在 3 个头部属性中的优先级最高。

header协商缓存

• Etag / If-None-Match（优先级高于Last-Modified / If-Modified-Since）

ETag/If-None-Match 的值是一串 hash 码，代表的是一个资源的标识符。
当服务端的文件变化的时候，它的 hash码会随之改变，通过请求头中的 If-None-Match 和当前文件的 hash 值进行比较，如果相等则表示命中协商缓存。
ETag 又有强弱校验之分，如果 hash 码是以 "W/" 开头的一串字符串，说明此时协商缓存的校验是弱校验的，只有服务器上的文件差异（根据 ETag 计算方式来决定）达到能够触发 hash 值后缀变化的时候，才会真正地请求资源，否则返回 304 并加载浏览器缓存。

• Last-Modified / If-Modified-Since

Last-Modified/If-Modified-Since 的值代表的是文件的最后修改时间。
第一次请求服务端会把资源的最后修改时间放到 Last-Modified 响应头中，第二次发起请求的时候，请求头会带上上一次响应头中的 Last-Modified 的时间，并放到 If-Modified-Since 请求头属性中。
服务端根据文件最后一次修改时间和 If-Modified-Since 的值进行比较，如果相等，返回 304 ，并加载浏览器缓存。

---