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的win 7 Ultimate 64 SP1上运行的.并且该错误在IE9的32位和64位版本中

编辑 使用正常的IIS 7.5测试相同的结果

编辑2 如果有人能够确认这是发生在他们身上会不会很好？

Answer 1

至于为什么他们返回不同的结果,答案是非常明显的.storageIE上的事件在值更改之前触发,在其他浏览器之后触发.您可以通过在代码中添加一点延迟来确认 :

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
}

我不知道为什么它以这种方式实现,但我猜测规范太模糊,并没有说什么时候应该被触发.

该存储事件被触发时的存储区域的变化,在前两节描述(会话存储,用于本地存储).

发生这种情况时,用户代理必须将任务排队,以使用名称存储来触发事件,该事件不会冒泡且不可取消,并且在每个Window对象上使用StorageEvent接口,该对象的Document对象具有受影响的Storage对象.