¿Cómo vinculo una función al evento de cambio HTML5 localStorage usando jQuery?
$(function () { $(window).bind('storage', function (e) { alert('storage changed'); }); localStorage.setItem('a', 'test'); });Intenté lo anterior pero no aparece la alerta.
Actualización : funciona en Firefox 3.6 pero no funciona en Chrome 8 o IE 8, por lo que la pregunta debería ser más '¿Cómo vincular el evento de cambio de almacenamiento local usando jQuery para todos los navegadores?'
Resulta que esto realmente funciona correctamente y he malinterpretado la especificación.
Cuando se llama a los métodos setItem(), removeItem() y clear() en un objeto de almacenamiento x que está asociado con un área de almacenamiento local, si los métodos hicieron algo, entonces en cada objeto de documento cuyo objeto de almacenamiento del atributo de almacenamiento local del objeto de ventana es asociado con la misma área de almacenamiento, que no sea x, se debe disparar un evento de almacenamiento
En otras palabras, se activa un evento de almacenamiento en cada ventana/pestaña excepto en la que actualizó el objeto localStorage y provocó el evento.
Entonces, el evento no se disparó 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ía el evento activado en la segunda pestaña.
Esta respuesta sobre el problema contiene más detalles.
He aquí cómo hacerlo en JQuery:
$(window).bind('storage', function (e) { console.log(e.originalEvent.key, e.originalEvent.newValue); }); Acceder e.key directamente no funciona. Debe usar e.originalEvent.key .
Algunos navegadores solo enviarán notificaciones de almacenamiento a otras pestañas y otros no. (Firefox enviará eventos de almacenamiento a su propia pestaña, pero parece que con la key establecida en nulo).
Una cosa a mencionar es que el controlador de eventos solo se llama en .setItem si el elemento realmente cambia. Me estaba arrancando el pelo tratando de hacer que esto funcionara hasta que me di cuenta de que no puedes seguir ejecutando setItem con el mismo valor.
Estoy en la versión de Chrome 54.0.2840.71 m
Aquí hay una prueba (ábrala 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)