Lyssna efter lagringshändelser
Reagera på lagringsändringar mellan flikar med storage-händelsen
Lyssna efter lagringshändelser är en gratis lektion i HTML Academy på CoddyKit. Detta är lektion 3 av 4. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för HTML Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i HTML Academy innehåller totalt 4 lektioner.
Kommunikation mellan flikar
Web Storage utlöser en storage-händelse i alla andra flikar från samma ursprung när localStorage ändras. Detta är det enklaste sättet att hålla flera öppna flikar i samma app synkroniserade – till exempel för att sprida en utloggning eller ett temabyte.
Registrera en lyssnare
Koppla hanteraren till window: window.addEventListener("storage", handleStorage). Lyssnaren utlöses endast i andra flikar eller fönster från samma ursprung – aldrig i fliken som själv utförde ändringen, eftersom den redan känner till uppdateringen.
window.addEventListener("storage", (e) => {
console.log("key:", e.key, "new:", e.newValue);
});StorageEvent-egenskaper
Händelsen innehåller key (nyckeln som ändrades), oldValue och newValue (strängar eller null), url (sidan som utlöste ändringen) samt storageArea (Storage-objektet – localStorage eller sessionStorage).
clear() sätter key till null
När en annan flik anropar localStorage.clear() utlöses storage-händelsen en gång med key === null och både oldValue och newValue som null. Identifiera detta mönster för att hantera total rensning separat från uppdateringar av enskilda nycklar.
removeItem-beteende
Ett anrop till removeItem utlöser händelsen med newValue === null och oldValue som den tidigare strängen. Skilj mellan "nyckel borttagen" och "nyckel satt till strängen null" genom att kontrollera att newValue är strikt null och inte strängen "null".
Begränsning till samma flik
Händelsen utlöses aldrig i fliken som skrev ändringen. Om du vill reagera på dina egna skrivningar kan du skicka en anpassad händelse efter setItem eller omsluta setItem i en hjälpfunktion som anropar både Storage API och appens interna eventbuss.
function setItem(key, val) {
localStorage.setItem(key, val);
window.dispatchEvent(new CustomEvent("local-storage", { detail: { key, val } }));
}Utloggning mellan flikar
Ange en nyckel som auth:logout med en tidsstämpel när en användare loggar ut. Andra flikar lyssnar efter nyckeln i storage-händelsen och rensar omedelbart sitt eget sessionstillstånd, vilket omdirigerar användaren till inloggningssidan utan att hen behöver klicka igen.
Synkronisering av tema och inställningar
När användaren växlar tema i en flik skriver du theme till localStorage. Storage-hanteraren i alla andra flikar läser det nya värdet och tillämpar document.documentElement.dataset.theme – ändringen visas omedelbart i alla öppna flikar.
Filtrera efter nyckel
En hanterare kan betjäna många funktioner genom att välja gren utifrån e.key. En switch-sats håller avsändaren lättläst: varje case hanterar en lagringsnyckel och ignorerar orelaterade ändringar som andra funktioner skriver till samma Storage.
sessionStorage fungerar inte mellan flikar
sessionStorage är knutet till en flik – skrivningar utlöser aldrig storage-händelser i andra flikar eftersom de har egna, separata sessionStorage. Använd localStorage när signalering mellan flikar behövs, även om du tar bort nyckeln direkt efteråt.
Alternativet BroadcastChannel
För mer avancerad meddelandehantering mellan flikar skickar BroadcastChannel API strukturerade data utan att använda lagringen: new BroadcastChannel("app").postMessage({ type: "logout" }). Använd BroadcastChannel för tillfälliga signaler och storage-händelser för tillstånd som också behöver finnas kvar.
Kunskapskontroll
Om flik A anropar localStorage.setItem("theme", "dark"), vilka flikar tar emot storage-händelsen?
Sammanfattning
Storage-händelsen skickar meddelanden mellan flikar när localStorage ändras i en annan flik och innehåller key, oldValue, newValue och storageArea. Den utlöses inte i fliken som skriver ändringen, så kombinera den med en anpassad händelse för fullständig lokal och fjärrbaserad distribution. Använd den för att sprida utloggningar, synkronisera teman och hantera tillstånd som ska förbli konsekventa mellan webbläsarfönster.
Lär dig HTML med en AI-lärare – gratis
Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.
- Kurser
- 40
- Lektioner
- 159
Vanliga frågor
Är lektionen ”Lyssna efter lagringshändelser” gratis?
Ja – du kan läsa vilka 3 lektioner som helst i lärvägen HTML Academy, inklusive ”Lyssna efter lagringshändelser”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i HTML Academy innehåller totalt 4 lektioner.
Vad lär jag mig i ”Lyssna efter lagringshändelser”?
Reagera på lagringsändringar mellan flikar med storage-händelsen Ni övar på HTML Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.
Behöver jag någon erfarenhet för att börja lära mig HTML Academy?
Du behöver inga förkunskaper. Utbildningen i HTML Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 3 av 4.
Hur lång tid tar lektionen ”Lyssna efter lagringshändelser”?
De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.
Kan jag skriva och köra kod i den här HTML Academy-lektionen?
Ja. Varje HTML Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.
Alla lektioner i den här kursen
- localStorage jämfört med sessionStorage
- Hämta, ange och ta bort objekt
- Lyssna efter lagringshändelser
- Säkerhet: vad Ni aldrig ska lagra i Storage