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

现在，如果我更改代码以使用{1}} Tab 1＆amp;标签2在var newValue = e.newValue;

中写入test

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

仅为了记录，这是在使用IIS Express并使用jquery-1.5.1的win 7 Ultimate 64 SP1上运行。并且该错误出现在IE9的32位和64位版本中

修改使用正常的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 事件，如前两节（对于会话存储，对于本地存储）所述。

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

localStorage.getItem在IE 9中返回旧数据

1 个答案: