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的當前頁面監聽問題就解決了，爽不？