localStorage.getItem devuelve datos antiguos en IE 9

Question

El siguiente ejemplo debe ejecutarse en IE 9 y en al menos dos pestañas diferentes.

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

Si se trata de obtener los datos con var newValue = localstorage.getItem('storage-event-test'); y en Tab 1 entra test entonces se muestra correctamente test en mi <p id="fromEvent"> pero en mi Tab que sólo escribe tes

Ahora bien, si Cambio el código para usar var newValue = e.newValue; ambos Tab 1 & Tab 2 escribe test en <p id="fromEvent">

¿Puede alguien explicarme por qué devuelven resultados diferentes? También he probado este código en Google Chrome y Firefox, y no tienen este problema.

Solo para el registro, esto se ejecutaba en un win 7 Ultimate 64 SP1 con IIS Express y con jquery-1.5.1. y el error es tanto en la versión de 32 y 64 bits de IE9

Editar Probado con IIS 7.5 mismo resultado normal

Editar 2 Sería bueno si alguien puede confirmar que esto está ocurriendo a ¿a ellos?

Answer 1

En cuanto a por qué devuelven resultados diferentes, la respuesta es bastante obvia. El evento storage en IE se activa antes de que cambie el valor y después de en otros navegadores. Puede confirmar esto adding a slight delay a su código:

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 
} 

No sé por qué se implementa esta manera sin embargo, pero supongo la specification es demasiado vaga y no dice cuando el evento debe ser despedido.

El almacenamiento evento se activa cuando un área de almacenamiento cambios, como se describe en las dos secciones anteriores (para almacenamiento de sesión, para el almacenamiento local).

Cuando esto sucede, el agente de usuario debe hacer cola una tarea para disparar un evento con el almacenamiento de nombre, que no lo hace la burbuja y no se puede cancelar, y que utiliza la interfaz StorageEvent, en cada Ventana objeto cuya El documento tiene un objeto Almacenamiento que se ve afectado.