web存储

一、localStorage和sessionStorage的区别：
1、他们都是用来存储客户端临时信息的对象。
2、他们均只能存储字符串类型的对象（虽然规范中可以存储其他原生类型的对象，但是目前为止没有浏览器实现）。
3、（1）localStorage生命周期是永久的，除非用户在浏览器提供的UI上清除localStorage信息，否则这些信息永远存在。
      （2）sessionStorage生命周期为当前窗口或者标签页，一旦窗口或者标签页被永久关闭了，那么所有通过sessionStorage存储的数据也就被清空了。
4、不同浏览器无法共享localStorage或者sessionStorage中的信息。
      （1）相同浏览器的不同页面之间可以共享相同的localStorage(页面属于相同域名和端口）
      （2）不同页面或者标签页间无法共享sessionStorage的信息。这里需要注意的是，页面及标签页仅指顶级窗口，如果一个标签页包含多个iframe标签且他们属于同源页面，那么他们之间是可以共享sessionStorage的。
二、localStorage和sessionStorage的用法（localStorage和sessionStorage使用时使用相同的API）：
1、设值：
      localStorage.setItem(“key”,“value”);//以“key”为名称存储一个值“value”
      localStorage.key = “value”;
      localStorage[“key”]=“value”;
2、取值：
       localStorage.getItem(“key”);//获取名称为“key”的值
       value=localStorage.key;
       value=localStorage[“key”];
3、枚举值：
      for(var i=0;i<localStorage.length;i++){
         var name = localStorage.key(i)​;
         var value = localStorage.getItem(name);
        }
4、删除：
        localStorage.removeItem(“key”);//删除名称为“key”的信息。
        delete localStorage.getItem(“key”);//删除名称为“key”的信息。(非IE8下）
5、清空：
        localStorage.clear();​//清空localStorage中所有信息
三、localStorage和sessionStorage的存储事件：
1、无论什么时候存储在localStorage或者sessionStorage的数据发生改变，浏览器都会在其他对该数据可见的窗口对象上触发存储事件（但是在对数据进行改变的窗口对象上是不会触发的）。只有当存储数据真正发生改变的时候才会触发存储事件。像已经存在的存储项设置一个一模一样的值，或者是删除一个本来就不存在的值是不会触发存储事件的。
2、event.key 属性：属性值为在 session 或 localStorage 中被修改的数据键值。
     event.oldValue 属性：属性值为在 sessionStorage 或 localStorage 中被修改的值。
     event.newValue 属性：属性值为在 sessionStorage 或 localStorage 中被修改后的值
     event.url 属性：属性值为修改 sessionStorage 或 localStorage 中值的页面的URL地址
     event.storageArea 属性 : 属性值为被变动的 sessionStorage 对象或 localStorage 对象
3、例子：

//利用storage事件实时监视wev Storage中的数据
   window.addEventListener('storage',function (e) {
   	  //e只是一个传参 //获取被修改的键值
   	   if (e.key == 'test') { 
   		   //获取将要被添加内容的元素 
   		   var output = document.getElementById('output'); 
   		   //将获取到的修改值在元素中输出 
   		   output.innerHTML = '原有值：' + e.oldValue; 
   		   output.innerHTML += '<br />新值:' + e.newValue;
   		   output.innerHTML += '<br />变动页面地址：' + utf8_decode(unescape(e.url)); 
   		   //分别打印会发现内容一致 
   		   console.log(e.storageArea);
   		   console.log(localStorage); 
   	    }
    },false);