localStorage.getItem在IE 9中返回旧数据 [英] localStorage.getItem returns old data in IE 9

问题描述

以下示例需要在IE 9和至少两个不同的标签中运行。

 < input type = textname =datavalue =placeholder =change meid =data/> 
< p id =fromEvent>通过< code>存储< / code>等待数据事件...< / p为H. 
 
< script type =text / javascript> 
 window.addEventListener（storage，function（e）{
 if（e.key =='storage-event-test'）{
 var newValue = localStorage.getItem（'storage -event-test'）; //返回旧值
 // var newValue = e.newValue; //返回新值$ b $（'＃fromEvent'）。html（newValue）; 
} 
}，false）; 
 $ b $（'＃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 ，那么它正确显示<$ c $在我的< p id =fromEvent> 但在我的标签2 中加入了c> test $ b $它只写 tes

现在，如果我更改代码以使用 var newValue = e.newValue; 标签1&标签2在< p id =fromEvent>< / code>< $ p
$中写入 test b $ b

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

仅仅为了记录，这是在一个使用IIS Express和使用jquery-1.5.1赢得7 Ultimate 64 SP1。并且该错误在IE9的32位和64位版本中

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

编辑2
如果有人能确认发生了这种情况会不会很好？

<解决方案

为什么他们返回不同的结果，答案是非常明显的。 IE浏览器上的存储事件在之前触发，其他浏览器上的值改变，之后触发。您可以通过为您的代码添加一个小小的延迟来确认：

  if（e.key =='storage-event-test'）{
 // e.newValue  - >新值
 // localStorage.getItem（'storage-event-test'） - >旧值在IE 
 setTimeout（function（）{
 var newValue = localStorage.getItem（'storage-event-test'）; //新值
（'＃fromEvent'）。 html（newValue）; 
}，1）; //延迟
} 
  

我不知道为什么它以这种方式实现，但我猜测 规范 太含糊，不能< t说什么时候应该触发事件。

存储时会触发 storage 事件如前两节所述（用于会话存储，用于本地存储）。

发生这种情况时，用户代理必须排队任务以激发事件名称存储不会冒泡且不可取消，并且使用 对象的每个 Window 对象使用 StorageEvent 接口。受影响的 Storage 对象。

The following example needs to be running in IE 9 and in at least two different tabs.

 <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>

If it try to get the data with var newValue = localstorage.getItem('storage-event-test'); and in Tab 1 enters test then it shows correctly test in my <p id="fromEvent"> but in my Tab 2 it only writes tes

Now if I change the code to use var newValue = e.newValue; both Tab 1 & Tab 2 writes test in <p id="fromEvent">

Can someone explain to me, why they return different results? I have also testet this code in Google Chrome and Firefox, and they don't have this problem.

Just for the record, this was running on a win 7 Ultimate 64 SP1 with IIS Express and using jquery-1.5.1. and the bug is in both the 32 and 64 bit version of IE9

Edit Tested with normal IIS 7.5 same result

Edit 2 Would be nice if someone could confirm that this is happening to them to?

解决方案

As to why they return different results the answer is pretty obvious. The storage event on IE is fired before the value changes, and after on other browsers. You can confirm this by adding a slight delay to your code:

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
}

I don't know why it is implemented this way though, but I'm guessing the specification is too vague and doesn't say when the event should be fired.

The storage event is fired when a storage area changes, as described in the previous two sections (for session storage, for local storage).

When this happens, the user agent must queue a task to fire an event with the name storage, which does not bubble and is not cancelable, and which uses the StorageEvent interface, at each Window object whose Document object has a Storage object that is affected.

这篇关于localStorage.getItem在IE 9中返回旧数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！