localStorage变更事件当前页响应新解-awen

html5的localStorage相信大家都是很熟悉了，但是在chrome等支持该对象的浏览器中（ie10除外），如果你监听storage变更事件你就会发现，当数据发生变化时本页是监听不到storage事件变更消息的。而同域的其他打开的页面反而监听到了该消息。悲剧不？

以上的机制应该是无可厚非的，但是对于单页app或者数据驱动的页面展现来说，这是一个让人抓狂的规事情。awen在开发中为了实现一个纯数据驱动的单页app机制。不得不面对这个问题，经过测试终于实现了本页面locaStorage变更监听。

基本原理如下：

1  重新生成一个对象，包装localStorage原生方法：

var Storage = {
        setItem : function(k,v){
        　　localStorage.setItem(k,v);
        　　......
        },
        removeItem : function(k){
        　　localStorage.removeItem(k);
               .......
        },
        getItem :
            ...
      }

2 在能引起storage变更时间的操作接口中，手动触发StorageEvent事件

　　比如removeItem的实现中，你就需要初始化并触发StorageEvent事件：

var se = document.createEvent("StorageEvent");
se.initStorageEvent('storage', false, false, key, oldval, newval, url, storage);
window.dispatchEvent(se);

 

3 通过自封装的Storage对象操作，并在当前页监听：

window.addEventListener("storage",function(e){
     console.log(e);
},false);

Storage.addItem('test','小朋友爱吃糖');

到此为止。StorageEvent的当前页面监听问题就解决了，爽不？