storage事件：当存储的storage数据发生变化时都会触发它，但是它不同于click类的事件会冒泡和能取消，storage改变的时候，触发这个事件会调用所有同域下其他窗口的storage事件，不过它本身触发storage即当前窗口是不会触发这个事件的（当然ie这个特例除外，它包含自己本事也会触发storage事件）。

在使用 Storage 进行存取操作的同时，如果需要对存取操作进行监听，可以使用 HTML5 Web Storage api 内置的事件监听器对数据进行监控。只要 Storage 存储的数据有任何变动，Storage 监听器都能捕获。

interface Storage : Event{
    readonly attribute DOMString key;
    readonly attribute DOMString? oldValue;
    readonly attribute DOMString? newValue;
    readonly attribute DOMString url;
    readonly attribute Storage? storageArea; void initStorageEvent(in DOMString typeArg,  in boolean canBubbleArg,  in boolean cancelableArg,  in DOMString keyArg,  in DOMString oldValueArg,  in DOMString newValueArg,  in DOMString urlArg,  in Storage storageAreaArg); };

不难看出其中包含以下属性：

  1. key 属性表示存储中的键名
  2. oldValue 属性表示数据更新前的键值，newValue 属性表示数据更新后的键值。如果数据为新添加的，则 oldValue 属性值为 null。如果数据通过 removeItem 被删除，则 newValue 属性值为 null 。如果 Storage 调用的是 clear 方法，则事件中的 key 、oldValue 、newValue 都是为 null
  3. url 属性记录 Storage 时间发生时的源地址
  4. StorageArea 属性指向事件监听对应的 Storage 对象

Storage 事件可以使用 W3C 标准的注册事件方法 addEventListenter 进行注册监听。例如：

window.addEventlistener("storage",showStorageEvent,false);

function showStorageEvent(e){ console.log(e) }

 

举例：

页面a下，有个input框用来存储store，它自身绑定了storage事件，这个时候写入新的数据点击保存，这时新的sotre数据保存了，但是页面a的storage事件没触发，

而页面b下，绑定的storage事件则触发了。（ps：前提页面a和b在同域下，并都是打开状态不同窗口）；

页面a代码：


<!          DOCTYPE           html>          


          <          html          >          


          <          head          >          


                    <          meta           charset="utf-8">          


                    <          title          ></          title          >          


          </          head          >          


          <          body          >          


          <          input           type="text" placeholder="input date to save">          


          <          button          >save</          button          >          


          <          script          >          


                    (function(D){          


                    var val = D.getElementsByTagName("input")[0],          


                    btn = D.getElementsByTagName("button")[0];          


                    btn.onclick = function(){          


                    var value = val.value;          


                    if(!value) return;          


                    localStorage.setItem("key", val.value);          


                    };          


                    window.addEventListener("storage", function(e){          


                    console.log(e);          


                    });          


                    })(document);          


          </          script          >          


          </          body          >          


          </          html          >



 

页面b代码：


<!          DOCTYPE           html>          


          <          html          >          


          <          head          >          


                    <          meta           charset="utf-8">          


                    <          title          ></          title          >          


          </          head          >          


          <          body          >          


          <          script          >          


                    window.addEventListener("storage", function(e){          


                    console.log(e);          


                    document.write("oldValue: "+ e.oldValue + " newValue:" + e.newValue)          


                    });          


                    


          </          script          >          


          </          body          >          


          </          html          >



看到这里是不是很疑惑那storage事件到底有什么用，多窗口间多通信用到它就是最好选择了，比如某块公用内容区域基础数据部分都是从store中提取的，这个区域中大多数页面中都有，当用户打开多个页面时，在其中一个页面做了数据修改，那其他页面同步更新是不是很方便（当前页面就要用其他方式处理了），当然用于窗口间通信它作用不仅仅如此，更多的大家可以利用它特性去发挥。

在上面的demo页面b中storage的events对象的属性常用的如下： 

 oldValue：更新前的值。如果该键为新增加，则这个属性为null。 

 newValue：更新后的值。如果该键被删除，则这个属性为null。

 url：原始触发storage事件的那个网页的网址。 

 key：存储store的key名；