Why does Internet Explorer sometimes trigger a loc

Question

This question already has an answer here:

• localStorage.getItem returns old data in IE 9 1 answer

Internet Explorer 10 sometimes triggers the window "storage" event before it has access to the new value. I have a listener for the "storage" event that reacts to new data being set but sometimes doesn't have access to it. This is especially problematic because the listener isn't able to react to the actual new data.

Why does this problem happen, and what can I do to fix it?

Answer 1

This issue has been raised here: localStorage.getItem returns old data in IE 9

Here's my solution that I've tested in IE10 and expect to work the same in IE8 and IE9:

First, my javascript components don't listen to the window "storage" event directly but instead listen to an 'event dispatcher' I created. The event dispatcher listens to the window "storage" event and triggers a backbone event. What I do is delay my eventDispatcher's storage event trigger for just long enough for IE to catch up. Using Underscore.js's defer() method, I'm able to get consistent behavior across browsers without any impact on user experience.

Here's what my dispatchStorageEvent() method looks like:

$(window).on('storage', dispatchStorageEvent);
function dispatchStorageEvent(event) {
  _.defer(function() {
    var originalEvent = JSON.parse(event.originalEvent);
    ...
    eventDispatcher.trigger("storageEvent:" + originalEvent.key, originalEvent.newValue);
  }, event);
}