Web Storage 是一种简单的将JavaScript处理的数据永久保存的接口，它可以让我们不通过服务器进行数据的读写，可以很好的减少和服务器的通信，实现离线操作。

     特点：

     1、以键值对的形式存储

     2、能够以普通JavaScript对象的方式进行读写

    Web Storage提供了同源服务的共享内存，不同服务，只要源相同，就可以共享存储，大部分浏览器以5MB为上限，Web Storage 实体是全局对象中对已的localStorage和sessionStorage 两个对象，localStorage中保存的数据只要没被显式的删除，就不会丢失，sessionStorage保存数据仅在同一个会话中保留。

基本操作：

     1、数据的读写：

            可以通过setItem方法将数据存至localStorage中，并通过getItem方法引用数据，也可以通过相应的语法进行读取

            

//数据保存，以下3行等价
localStorage.setItem('foo','bar');
localStorage.foo='bar';
localStorage['foo']='bar';

//数据的引用，以下3行等价
var data= localStorage.getItem('foo');
var data= localStorage.foo;
var data= localStorage['foo']

       localStorage只能对字符串进行读写，若要存储对象，可以使用JSON.stringfy和JSON.parse方法，进行相关转换

      2、数据的删除：

       可以通过removeItem方法删除，也可以通过相应的语法进行删除。

     

//删除数据
localStorage.removeItem('foo');
delete localStorage.foo;
delete localStorage['foo'];

       若要一次性全部删除，可以使用clear方法。

      3、数据的枚举

     可以通过key方法和length属性来枚举localStorage中的数据，也可以通过for in语句枚举

    

//key方法和length枚举
for(var i=0;i<localStorage.length;i++) {

     var key =localStorage.key(i),
           value=localStorage[key];
}

//通过for in语句枚举
for(var key in localStorage) {
    //使用直接属性
    if(localStorage.hasOwnProperty(key)) {
       var value=localStorage[key];
    }
}

Web Storage中的storage事件：

    在某一个窗口改变了Web Storage的数据后，就会在其他窗口触发storage事件，通过监听该事件，就能保证多个同时打开窗口间的数据一致性。

   

window.addEventListener('storage',function(event) {
    if(event.key === 'userid'){
         var msg = 'Hello '+ event.newValue;
         document.getElementById('msg').textContent = msg;
    }
},false);

命名空间的管理：

    应该避免直接对于localStorage的数据添加，而是对于一个服务，创建该服务对应的命名空间，然后将其绑定到localStorage中

//以服务为单位进行命名空间管理

var SERVICE_NAME ='my service',
      mystorage = null;
//通过load事件读取数据到本地变量
window.onload = function() {
     try{
           mystorage =JSON.parse(localStorage[SERVICE_NAME] || '{}');
     }catch(e){
           mystorage = {};
      }
};
//通过beforeunload事件将数据写入localStorage
window.onbeforeunload = function() {
    localStorage[SERVICE_NAME] = JSON.stringfy(storage);
}

此时，对于多个标签页的数据一致性问题，就需要在合适的时间，将本地变量写入localStorage中进行同步，并捕捉storage事件，在其他页执行更新操作，读到本地变量。

//写入localStorage
function setStorage(key,value){
     storage[key] = value;
     localStorage[SERVICE_NAME] =JSON.stringfy(storage);
}

//其他页内读入本地变量
window.onstorage= function(event) {
    if(event.key === SERVICE_NAME && event.newValue){
        storage = JSON.parse(event.newValue);
    }
}