localStorage.getItem returns old data in IE 9

Question

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?

Answer 1

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.