Código de muestra para implementar la comunicación entre páginas utilizando eventos de almacenamiento

Todos sabemos que se deben cumplir las dos condiciones siguientes para activar window.onstorage:

• Guarde (actualice) un almacenamiento a través de localStorage.setItem o sessionStorage.setItem
• Al guardar (actualizar) este almacenamiento, su nuevo valor debe ser diferente al valor anterior

La segunda condición anterior, en pocas palabras, es: o la inicialización del almacenamiento, porque el almacenamiento no existe, su valor es nulo o es la actualización del almacenamiento existente;

Ejemplo:

 // Inicializar Storagewindow.localStorage.setItem('a', 123); // Registrar el evento de almacenamiento window.onstorage = (e) => { console.log(e);} // Actualizar Storagewindow.localStorage.setItem(' a', 123);

La última línea de código anterior no activa el evento de almacenamiento porque el valor de a no ha cambiado, es 123 antes y después, por lo que el navegador determina que esta actualización no es válida.

Dado que el evento de almacenamiento lo activa el navegador, si abrimos varias páginas con el mismo nombre de dominio y ejecutamos el método window.localStorage.setItem en cualquiera de ellas (también debemos asegurarnos de que el segundo elemento mencionado al principio del artículo se cumple) condición), entonces, si otras páginas escuchan el evento de almacenamiento, se ejecutarán las devoluciones de llamada del evento de almacenamiento en estas páginas.

Ejemplo:

 // http://www.example.com/a.html<script>// Registrar evento de almacenamiento window.onstorage = (e) => { console.log(e);};</script> 

 // http://www.example.com/b.html<script>// Registrar evento de almacenamiento window.onstorage = (e) => { console.log(e);};</script> 

 // http://www.example.com/c.html<script>// Activar evento de almacenamiento window.localStorage.setItem('a', new Date().getTime());</script>

Siempre que se garantice que la página c se abra después de las páginas a y b (incluso si las tres páginas no están en la misma ventana del navegador, debe distinguir la diferencia entre la ventana y la página de pestañas), entonces los eventos de almacenamiento en las páginas Se activarán a y b.

Ahora que sabemos cómo utilizar eventos de almacenamiento para lograr la comunicación entre páginas, ¿qué utilidad tiene para nosotros esta comunicación?

De hecho, solo necesitamos saber qué operación de actualización de almacenamiento desencadenó el evento de almacenamiento. Entonces, ¿cómo lo sabemos? La devolución de llamada de eventos de almacenamiento, al igual que otras funciones de devolución de llamadas de eventos, también recibe un parámetro de objeto de evento. Hay tres propiedades útiles en este objeto:

• clave El nombre de la clave del almacenamiento que se está inicializando o actualizando.
• oldValue es el valor antes de que se inicializara o actualizara el almacenamiento.
• newValue es el valor después del almacenamiento inicializado o actualizado

Combinando estos 3 atributos clave, podemos lograr la sincronización de datos entre páginas.

Finalmente, permítanme mencionar la diferencia entre localStorage y sessionStorage.

Los datos almacenados en localStorage no tienen una configuración de tiempo de vencimiento y los datos almacenados en sessionStorage se borrarán cuando finalice la sesión de la página.

Lo anterior es el contenido completo de este artículo. Espero que sea útil para el estudio de todos. También espero que todos apoyen VeVb Wulin Network.