localStorage.getItem返回IE中的舊數據9

Question

以下示例需要在IE 9中以及至少兩個不同的選項卡中運行。

<input type="text" name="data" value="" placeholder="change me" id="data" /> 
<p id="fromEvent">Waiting for data via <code>storage</code> event...</p> 

<script type="text/javascript"> 
window.addEventListener("storage", function (e) { 
    if (e.key == 'storage-event-test') { 
     var newValue = localStorage.getItem('storage-event-test'); // returns old value 
    // var newValue = e.newValue; // returns new value 
     $('#fromEvent').html(newValue); 
    } 
    }, false); 

    $('#data').live('keyup', function() { 
    var changedValue = this.value; 
     $('#fromEvent').html(changedValue); 
     localStorage.setItem('storage-event-test', changedValue); 
    }); 
</script> 

如果嘗試var newValue = localstorage.getItem('storage-event-test');和標籤來獲取數據1進入test那麼正確test顯示在我的<p id="fromEvent">但在我標籤2 只寫tes

現在，如果我更改代碼以使用var newValue = e.newValue;兩個選項卡1 &選項卡2寫入test在<p id="fromEvent">

有人可以向我解釋，他們爲什麼會返回不同的結果？ 我也在Google Chrome和Firefox中測試了這段代碼，但他們沒有這個問題。

只是爲了記錄，這是運行在與IIS Express和使用jQuery 1.5.1勝7終極版64 SP1。和bug是在兩個32位和64位版本的IE9的

編輯 正常IIS 7.5相同的結果測試

編輯2 將是很好，如果有人可以證實，這是發生在他們去？

Answer 1

至於爲什麼他們返回不同的結果答案是非常明顯的。 IE上的storage事件在之前被觸發之前的值更改，之後在其他瀏覽器上。您可以通過adding a slight delay確認給你的代碼：

if (e.key == 'storage-event-test') { 
    // e.newValue -> new value 
    // localStorage.getItem('storage-event-test') -> old value in IE 
    setTimeout(function(){ 
     var newValue = localStorage.getItem('storage-event-test'); // new value 
     $('#fromEvent').html(newValue); 
    }, 1); // delay 
} 

我不知道爲什麼它雖然這種方式來實現，但我猜specification太含糊，沒有說明何時該事件應該被解僱。

的存儲事件被觸發時的存儲區域的變化，如在前面兩節中描述（對於會話存儲，用於本地存儲）。

發生這種情況時，用戶代理必須隊列的任務於火焰的名稱存儲，這不起泡且不可取消的事件，以及使用所述StorageEvent接口，在每個窗口對象，其文檔對象有一個存儲受影響的對象。