2016-03-08 45 views
3

附加事件:存儲事件不觸發

$(window).on("storage", function (e) { 
    //callback not getting hit 
}); 

試圖觸發事件:

localStorage.setItem("test", "123"); 

我有兩個選項卡中打開,既聽存儲事件。我可以看到localStorage在兩個選項卡上正確更新。但是,當我在一個選項卡上更改localStorage時,另一個選項卡從不觸發事件。有任何想法嗎?

在Chrome/Firefox上試過。域格式是https://www.xxx.yyy.zzz

回答

1

問題是由代碼document.domain壓倒一切的造成的。在我刪除了document.domain setter之後,事件正常運行。

似乎這是由Chrome中的錯誤引起的。

https://bugs.chromium.org/p/chromium/issues/detail?id=136356&q=label%3AOWP-Standards-Compatibility&colspec=ID%20Pri%20M%20Stars%20ReleaseBlock%20Cr%20Status%20Owner%20Summary%20OS%20Modified

+0

'我刪除了違規行後,事件正常工作.'你刪除了哪條違規行? – gurvinder372

+0

我重新回答了答案,現在更清楚了嗎?我在具有主機'abc.xyz.com'的頁面上有'document.domain = xyz.com'。 – user3233089

0

你有沒有試過這種簡單example

window.addEventListener('storage', function (e) { 
    console.log("storage event occured"); 
}); 
+0

是的,我做到了,回調沒有被調用。 – user3233089

+0

@ user3233089你可以檢查這個演示是否在你的瀏覽器上運行http://html5demos.com/storage-events – gurvinder372

+0

是的演示工作正常。 – user3233089

0
window.addEventListener('storage', function (e) { 
     console.log("storage event occured here"); 
},false); 

存儲聽者中被調用的其他選項卡,比源標籤等。只需將調試器添加到其他選項卡。

0

無論何時鍵值發生變化(例如set或remove方法所做的更改),您都可以使用實用程序(如localDataStorage)在同一個窗口/選項卡中爲您觸發事件。您還可以使用它來透明地設置/獲取以下任何「類型」:Array,Boolean,Date,Float,Integer,Null,Object或String。

[免責聲明]我的實用程序的作者[/免責聲明】

一旦你實例化的實用工具,下面的代碼片斷將讓您監視事件:

function localStorageChangeEvents(e) { 
    console.log(
     "timestamp: "  + e.detail.timestamp + " (" + new Date(e.detail.timestamp) + ")" + "\n" + 
     "key: "   + e.detail.key  + "\n" + 
     "old value: "  + e.detail.oldval + "\n" + 
     "new value: "  + e.detail.newval + "\n" 
    ); 
}; 
document.addEventListener(
    "localDataStorage" 
    , localStorageChangeEvents 
    , false 
);