Web Storage

     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事件将数据写入localStoragewindow.onbeforeunload = function() {    localStorage[SERVICE_NAME] = JSON.stringfy(storage);}

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

//写入localStoragefunction 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);    }}