WebStorage：

localStorage在本地永久性存储数据，除非显式将其删除或清空
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缓存规则

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

强制缓存

强制缓存
对比缓存,协商缓存

对比缓存
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 ，并加载浏览器缓存。