爲什麼Internet Explorer在存儲數據的窗口上觸發窗口「存儲」事件？

Question

Internet Explorer 10在存儲到本地存儲的相同窗口上觸發窗口「存儲」事件。

似乎其他瀏覽器只在所有其他窗口上觸發事件，所以我不必擔心存儲事件響應自己存儲的窗口。爲什麼IE在錯誤的窗口中觸發事件，以及如何在IE中複製標準行爲？

Answer 1

微軟似乎也意識到這個問題，但它看起來並不像他們將盡快修復它的任何時間：https://connect.microsoft.com/IE/feedback/details/774798/localstorage-event-fired-in-source-window

一種選擇是，你可以設計你的聽衆和制定者，使他們當他們從已經與他們的狀態一致的存儲事件中獲得信息時，不會做出反應或存儲。但是，這種設計模式可能比僅依賴其他窗口的存儲事件更難。

另一種選擇是使本地存儲在IE中以與在其他瀏覽器中工作相同的方式工作。我想出了一個我曾在IE10中測試過，並且希望能夠在IE8和IE9中工作的公認的黑客但功能性的解決方案。我的JavaScript組件不直接監聽窗口「存儲」事件，而是監聽我創建的「事件分派器」。事件調度程序偵聽窗口「存儲」事件並觸發骨幹事件，除非存儲事件發生在該窗口中。就我檢查，如果這個窗口存儲這個值是通過使用自定義的方法調用，這個數值將創建一個唯一的ID和將其記錄下來，這樣的setItem（）：

eventDispatcher.set = function(key, value) { 
    var storageId = (new Date()).getTime(); 
    eventDispatcher.idList.push(storageId); 
    localStorage.setItem(key, {value: value, id: storageId}); 
} 

而我此事件偵聽存儲事件和觸發事件僅當它是創建不包含此值的ID，像這樣的ID列表：

$(window).on('storage', dispatchStorageEvent); 
function dispatchStorageEvent(event) { 
    var newValue = JSON.parse(event.originalEvent.newValue); 
    if (eventDispatcher.idList.indexOf(newValue['id']) > -1) { 
    return; 
    } 
    eventDispatcher.trigger("storageEvent:" + event.originalEvent.key, newValue['value']); 
} 

有一點更多的代碼，您可以添加到保持IDLIST短，將其創建爲首先是一個空陣列，但爲了清晰起見，我將其留在了外面。製作一個eventDispatcher來處理存儲事件有點費用，但它可以使你的開發在瀏覽器之間保持一致。一個不太冒險的解決方案將使用適當的鎖定和排隊機制，但這可能非常困難。