Comunicando pestañas del navegador con localStorage

Hay mucha gente que me ha preguntado en ocasiones si sería posible tener comunicación entre dos pestañas del navegador. Y la respuesta es sí, pero siempre que pertenezcan a un mismo host. Para ello utilizaremos un pequeño "truco", y es que jugaremos con el objeto localStorage.

Como explicación breve, localStorage es un atributo del objeto window. Y gracias a él, podremos persistir diferentes datos en el navegador. De forma, que dichos datos persistan incluso cuando se cierre el navegador. Para almacenarlos, se utiliza con el sistema clave / valor.

Como breve inciso, su hermano sessionStorage, hace lo mismo, pero con cada sesión del navegador, es decir, una vez cerremos la pestaña o cambiemos de página, se borrarán todos los datos. Además, si tenemos dos o más pestañas abiertas de un mismo host de forma simultánea, cada una tendrá su propio sessionStorage.

Si os interesa que hable más de este tema, avisadme en los comentarios y preparo un tutorial para explicar el funcionamiento de los Storages en JavaScript.

Pues bien, volviendo al tema; si tenemos en cuenta que, por así decirlo, sólo hay un localStorage por host. Podemos jugar con éste, para preparar un sistema de mensajería inter-pestaña.

Por un lado tendríamos nuestra función emisora:

function sendMessage(messageId, messageContent) {
  localStorage.setItem(messageId, messageContent);
}

sendMessage("shoppingCartMessage", "Element added");

Por otro, la función receptora:

const messageId = "shoppingCartMessage";

window.addEventListener("message", function onMessage(event) {
    if (event.key === messageId && event.newValue) {
        console.log("Recibido el mensaje: " + event.newValue;
    }
});

Ahora pasemos a ver un poco lo que hace cada función.

Por un lado la emisora, simplemente guarda en localStorage un mensaje con un identificador. Por otro, el receptor, define un manejador de eventos, para recibir aquellos que son de tipo "message". Este manejador sólo será notificado cuando otra pestaña realice cambios en el localStorage. Es decir, sólo se nos notificará cuando otra pestaña cambie algo en el localStorage de nuestro host. Los cambios en el sessionStorage no son notificados por este evento.

Creo que cabe decir, que lo que usemos como messageId en ambos lados, debe ser igual.

Pues bien, con tan poquitas líneas y gracias al juego del evento "message", podemos tener mensajería sencilla entre pestañas. El flujo será:

• El emisor guarda el mensaje en localStorage con una clave definida.
• El receptor, recibe la notificación de cambio en el Storage. Pasa a comprobar si el ítem modificado es el esperado. Y si es así, y tiene contenido el mensaje, pasaría a seguir con el comportamiento esperado.

Como extra, la emisora podría dejar vacío nuevamente el campo del mensaje, por si en algún otra sección del código de la parte receptora necesitara mirar la clave.