客户端缓存

localStorage 和 sessionStorage

区别：有效期、作用域不同——数据可以储存多长时间、谁拥有数据的访问权。

localStorage：数据是永久性的，除非web应用刻意删除、用户设置浏览器删除；作用域：同源文档可共享；不同浏览器不可共享

sessionStorage:窗口、标签页永久关闭，数据清除（现代浏览器具备重新打开最近关闭的标签页，恢复上一次浏览的会话功能，sessionStorage会恢复）；作用域：同源文档 && 同一个窗口

1. localStorage API

“localStorage.setItem("x",1);//以"x"的名字存储一个数值
localStorage.getItem("x");//获取数值
//枚举所有存储的名字/值对
for(var i=0;i＜localStorage.length;i++){//length表示了所有名字/值对的总数
var name=localStorage.key(i);//获取第i对的名字
var value=localStorage.getItem(name);//获取该对的值
}
localStorage.removeItem("x");//删除"x"项
localStorage.clear();//全部删除
”

摘录来自: David Flanagan. “JavaScript权威指南（原书第6版）。” iBooks. 

2. 储存事件

  //利用storage事件实时监视wev Storage中的数据
  window.addEventListener('storage',function (e) {//e只是一个传参
                //获取被修改的键值
                if (e.key == 'test') {
                    console.log( e.oldValue, e.newValue,utf8_decode(unescape(e.url)))
                    console.log(e.storageArea);
                    console.log(localStorage);
                    //此行代码只在Chrome浏览器中有效
                    console.log(e.storageArea === localStorage);//输出true
                }
            },false);

cookie

检测是否启用：navigator.cookieEnabled ,返回boolean值，非标准属性，不是所有浏览器都支持
有效期：有效期默认web浏览器会话期间，和整个浏览器进程，而不是单个窗口的有效期保持一致，可设置max-age 属性，延长有效期，单位为秒
作用域：和localStorage以及sesstionStorage类似，cookie的作用域是通过文档源和文档路径来确定的。该作用域通过cookie的path和domain属性也是可配置的。