Monitorando eventos de armazenamento

O armazenamento da Web dispara um evento de armazenamento em todas as outras abas da mesma origem sempre que o localStorage é alterado. Essa é a maneira mais simples de manter várias abas abertas do mesmo aplicativo sincronizadas — por exemplo, propagando um encerramento de sessão ou uma mudança de tema.

Anexe o manipulador a window: window.addEventListener("storage", handleStorage). O ouvinte é disparado somente em outras abas ou janelas da mesma origem — nunca na aba que realizou a alteração, pois ela já sabe da atualização.

O evento contém key (a chave que mudou), oldValue e newValue (textos ou null), url (a página que disparou a alteração) e storageArea (o objeto de armazenamento — localStorage ou sessionStorage).

Quando outra aba chama localStorage.clear(), o evento de armazenamento é disparado uma vez com key === null e tanto oldValue quanto newValue definidos como null. Detecte esse padrão para tratar uma limpeza em massa separadamente das atualizações de uma única chave.

Uma chamada a removeItem dispara o evento com newValue === null e oldValue contendo o texto anterior. Diferencie "chave excluída" de "chave definida como o texto null" verificando se newValue é estritamente null, e não o texto "null".

O evento nunca é disparado na aba que gravou a alteração. Para reagir às suas próprias gravações, dispare um evento personalizado após setItem ou envolva setItem em uma função auxiliar que chame tanto a API de armazenamento quanto o barramento de eventos do aplicativo.

Defina uma chave como auth:logout com um registro de data e hora quando o usuário sair. As outras abas escutam essa chave no evento de armazenamento e limpam imediatamente o próprio estado da sessão, redirecionando para a página de login sem que o usuário precise clicar novamente.

Quando o usuário alternar o tema em uma aba, grave theme no localStorage. O manipulador do evento de armazenamento em cada uma das outras abas lê o novo valor e aplica document.documentElement.dataset.theme — a alteração aparece instantaneamente em todas as abas abertas.

Um único manipulador pode atender a vários recursos verificando e.key. Uma instrução de seleção mantém o despachante legível: cada caso trata uma chave de armazenamento e ignora alterações não relacionadas que outros recursos gravam no mesmo objeto de armazenamento.

O sessionStorage é específico de cada aba — suas gravações nunca disparam eventos de armazenamento em outras abas, pois elas têm seu próprio sessionStorage independente. Use localStorage quando for necessária sinalização entre abas, mesmo que você remova imediatamente a chave depois.

Para mensagens mais avançadas entre abas, a API BroadcastChannel envia dados estruturados sem tocar no armazenamento: new BroadcastChannel("app").postMessage({ type: "logout" }). Use BroadcastChannel para sinais temporários e eventos de armazenamento para estados que também precisam persistir.

O evento de armazenamento fornece notificações entre abas sempre que o localStorage é alterado em outra aba, com key, oldValue, newValue e storageArea. Ele não é disparado na aba que grava, portanto combine-o com um evento personalizado para realizar o despacho local e remoto completo. Use-o para propagar encerramentos de sessão, sincronizar temas e manter consistente qualquer estado que deva permanecer igual entre as janelas do navegador.