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接口，在每个窗口对象，其文档对象有一个存储受影响的对象。