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'); 获取数据并在Tab 1 中输入test，那么它会在我的<p id="fromEvent"> 中正确显示test，但在我的Tab 2 它只写tes

现在，如果我将代码更改为使用 var newValue = e.newValue;，Tab 1 和 Tab 2 都会在 <p id="fromEvent"> 中写入 test

有人可以向我解释一下，为什么它们会返回不同的结果？ 我也在 Google Chrome 和 Firefox 中测试过这段代码，他们没有这个问题。

仅作记录，这是在带有 IIS Express 并使用 jquery-1.5.1 的 win 7 Ultimate 64 SP1 上运行的。该错误存在于 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 太模糊了，没有说明事件何时发生应该被解雇。

storage 事件在存储区域发生变化时触发，如前两节所述（对于会话存储，对于本地存储）。

当这种情况发生时，用户代理必须排队一个任务以触发一个名为 storage 的事件，该事件不会冒泡且不可取消，并且使用 StorageEvent 接口，在每个 Window 对象，其 Document 对象有一个受影响的 Storage 对象。