Html5常见知识点之缓存（cookie，sessionStorage，localStorage）

1缓存 cookie、sessionStorage、localStorage

         三者都是保存在浏览器端的数据，cookie一般用来保存用户名等识别身份的数据，H5中 提供了两种在客户端存储和获取数据的方法即localhostStorage和sessionStorage

2三者区别

  

缓存	cookie	sessionStorage	localStorage
生命周期	在设置的生命周期内有效	浏览器打开时存在，关闭窗口消失	除非手动设置否则永远存在
大小	4k左右	5M或更大	5M或更大
是否与服务器通信	与服务器通信，每次都携带在http请求头中	不参与服务器通信	不参与服务器通信

3webstorage使用方法

(1) 使用storage.getItem()从存取中获取数据项，该方法接受数据项的键作为参数并返回数据值

例如：var local = localStorage.getItem（“text”）;

(2) 使用Storage.setItem()来创建新数据项和更新已存在的值，该方法接收两个参数，要修改/创建的数据项的键和对应的值

例如：localStorage.setItem("div",document,getElementById("div").value)

(3) 使用Storage.removeItem()来删除数据记录，该方法接收一个参数即你想要移除的数据项的键，然后会将对应的数据项从域名对应的存储对象中删除

     Storage.clear()不接受参数，简单的清空域名对应的整个存储对象

(4) 通过StorageEvent响应存储的变化

     window.addEventLisener('storage',function(e){

      });

参考文档：https://developer.mozilla.org/zh-CN/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API