Luisteren naar storage-events

De gebeurtenis bevat key (de gewijzigde sleutel), oldValue en newValue (tekenreeksen of null), url (de pagina die de wijziging heeft geactiveerd) en storageArea (het Storage-object — localStorage of sessionStorage).

Wanneer een ander tabblad localStorage.clear() aanroept, wordt de opslaggebeurtenis één keer geactiveerd met key === null en zijn zowel oldValue als newValue null. Herken dit patroon om het volledig wissen afzonderlijk van updates van één sleutel af te handelen.

Bij een aanroep van removeItem wordt de gebeurtenis geactiveerd met newValue === null en bevat oldValue de vorige tekenreeks. Maak onderscheid tussen "sleutel verwijderd" en "sleutel ingesteld op de tekenreeks null" door te controleren of newValue strikt null is en niet de tekenreeks "null".

De gebeurtenis wordt nooit geactiveerd in het tabblad dat de wijziging heeft geschreven. Als je op je eigen schrijfbewerkingen wilt reageren, activeer je na setItem een aangepaste gebeurtenis of wikkel je setItem in een hulpfunctie die zowel de opslag-API als je gebeurtenisbus in de toepassing aanroept.

Stel een sleutel zoals auth:logout met een tijdstempel in wanneer een gebruiker zich afmeldt. Andere tabbladen luisteren in de opslaggebeurtenis naar die sleutel en wissen onmiddellijk hun eigen sessiestatus, waarna ze naar de aanmeldpagina worden doorgestuurd zonder dat de gebruiker opnieuw hoeft te klikken.

Wanneer de gebruiker in één tabblad het thema omschakelt, schrijf je theme naar localStorage. De gebeurtenisafhandelaar in elk ander tabblad leest de nieuwe waarde en past document.documentElement.dataset.theme toe — de wijziging verschijnt onmiddellijk in alle geopende tabbladen.

Eén handler kan meerdere functies bedienen door op basis van e.key verschillende paden te volgen. Een switch-instructie houdt de verzendfunctie overzichtelijk: elk case-blok verwerkt één opslagsleutel en negeert niet-gerelateerde wijzigingen die andere functies naar dezelfde Storage schrijven.

sessionStorage is per tabblad — schrijfbewerkingen ervan activeren nooit opslaggebeurtenissen in andere tabbladen, omdat die hun eigen onafhankelijke sessionStorage hebben. Gebruik localStorage wanneer signalering tussen tabbladen nodig is, zelfs als je de sleutel direct daarna weer verwijdert.

Voor uitgebreidere berichten tussen tabbladen verstuurt de BroadcastChannel API gestructureerde gegevens zonder de opslag aan te raken: new BroadcastChannel("app").postMessage({ type: "logout" }). Gebruik BroadcastChannel voor tijdelijke signalen en opslaggebeurtenissen voor status die ook moet blijven bestaan.

De opslaggebeurtenis levert meldingen tussen tabbladen wanneer localStorage in een ander tabblad verandert, met key, oldValue, newValue en storageArea. De gebeurtenis wordt niet geactiveerd in het tabblad dat schrijft, dus combineer deze met een aangepaste gebeurtenis voor volledige lokale en externe afhandeling. Gebruik dit voor het doorgeven van afmeldingen, het synchroniseren van thema's en elke status die consistent moet blijven tussen browservensters.