localStorage.getItemはIE 9で古いデータを返します

Question

次の例は、IE 9と少なくとも2つの異なるタブで実行する必要があります。

<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を入力した場合、それは正しく私の<p id="fromEvent">でtestを示したが、私のタブ2 で、それは場合にのみ、今tes

を書き込み私は使用するコードを変更するvar newValue = e.newValue;タブ1 &タブ2書き込みtest<p id="fromEvent">

誰かが私に説明して、別の結果を返すのはなぜですか？ Google ChromeとFirefoxでこのコードをテストしても、この問題は発生しません。

これは記録のために、これはIIS Expressを使用し、jquery-1.5.1を使用して7 Ultimate 64 SP1で優勝していました。バグは通常のIIS 7.5と同じ結果でテストIE9の32ビットおよび64ビット版の

編集 の両方である

編集2 誰かが、これはに起こっていることを確認することができればいいだろうそれらへ？

Answer 1

なぜ異なる結果を返すのか、その答えはかなり明白です。 IEのstorageイベントは、の前に、の値が変更され、他のブラウザでの後にのイベントが発生します。それはしかし、この方法で実装されている理由を私は知らない

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があまりにも漠然としているとをするとき言っていない推測している：あなたは、あなたのコードにadding a slight delayことによってこれを確認することができますイベントは解雇されるべきです。

前の2つのセクションで説明したようにストレージイベントは（セッション・ストレージ用のローカルストレージのため）、場合ストレージエリア変更焼成します。

このような場合、ユーザエージェントは、バブリングされずキャンセルできない名前のストレージとイベントを発出するタスクをキューイングしなければならず、これは、その各ウィンドウ目的で、StorageEventインタフェースを使用文書オブジェクトには影響を受けるストレージオブジェクトがあります。