¿Cómo enlazar al evento de cambio localStorage usando jQuery para todos los navegadores?

Question

¿Cómo vinculo una función con el evento de cambio localStorage de HTML5 usando jQuery?

$(function() { 

    $(window).bind('storage', function (e) { 
    alert('storage changed'); 
    }); 

    localStorage.setItem('a', 'test'); 

}); 

He intentado lo anterior pero la alerta no se muestra.

actualización: Funciona en Firefox 3.6, pero no funciona en Chrome o IE 8 8 así que la pregunta debe ser más '? ¿Cómo se unen al evento de cambio de localStorage usando jQuery para todos los navegadores'

Answer 1

Resulta que este es en realidad funciona correctamente y he malinterpretado the specification

Cuando el setItem(), removeItem(), y claro() se llama en un x objeto de almacenamiento que se asocia con un área de almacenamiento local, si los métodos hicieron algo, a continuación, en cada objeto del documento cuya ventana objeto almacenamiento de del objeto localStorage atributo se asocia con la misma área de almacenamiento, que no sea x, un evento de almacenamiento debe ser despedido

en otras palabras , se dispara un evento de almacenamiento en cada ventana/pestaña excepto para el que actualizó el objeto localStorage y provocó el evento.

Así que el evento no se activó porque solo tenía una ventana/pestaña abierta. Si coloco el código anterior en una página y abro la página en dos pestañas, veré el evento disparado en la segunda pestaña.

This answer on the problem contiene más detalles.

Answer 2

Así es como hacerlo en jQuery:

$(window).bind('storage', function (e) { 
    console.log(e.originalEvent.key, e.originalEvent.newValue); 
}); 

Acceso e.key directamente no funciona, es necesario utilizar e.originalEvent.key.

Algunos navegadores solo envían notificaciones de almacenamiento a otras pestañas, y otros no. (Firefox enviará eventos de almacenamiento a su propia pestaña, pero con key establecido en nulo, parece).

Answer 3

Una cosa para mencionar es que el controlador de eventos solo se llama en .setItem si el elemento en realidad cambia. Estaba arrancándome el pelo tratando de hacer que esto funcione hasta que me di cuenta de que no puedes seguir ejecutando setItem con el mismo valor.

estoy en Chrome versión 54.0.2840.71 m

Aquí está una prueba (abrir esto en dos pestañas del navegador).

if (window.addEventListener) 
      addEventListener('storage', storage_event, false); 
     else if (window.attachEvent) 
      attachEvent('onstorage', storage_event, false); 
     function storage_event(e) { 
      console.log("Time is now "+ e.newValue); 
     } 

     setInterval(function() { 
      var time=new Date().getTime(); 
      localStorage.setItem("time", time); 
      console.log("Setting time to "+time); 
     }, 1000) 

Answer 4

Siempre se puede utilizar una utilidad como localDataStorage para disparar los hechos por los que, en la misma ventana/pestaña, cada vez que cambia el valor clave, como las realizadas por el conjunto o eliminar métodos. También puede usarlo para establecer/obtener de forma transparente cualquiera de los siguientes "tipos": Array, Boolean, Date, Float, Integer, Null, Object o String.

[Aviso Legal] yo soy el autor de la utilidad [/ RENUNCIA]

Una vez que una instancia de la utilidad, el siguiente fragmento le permitirá monitorizar los eventos (en la vainilla JS, puesto que ya se han dado ejemplos de jQuery):

function localStorageChangeEvents(e) { 
    console.log(
     "timestamp: "  + e.detail.timestamp + " (" + new Date(e.detail.timestamp) + ")" + "\n" + 
     "key: "   + e.detail.key  + "\n" + 
     "old value: "  + e.detail.oldval + "\n" + 
     "new value: "  + e.detail.newval + "\n" 
    ); 
}; 
document.addEventListener(
    "localDataStorage" 
    , localStorageChangeEvents 
    , false 
);