JavaScript Academy · Lektion

Lagringshändelser och begränsningar

Reagera på ändringar och respektera kvotbegränsningar.

Lektion 4 av 413 steg

Lagringshändelser och begränsningar är en gratis lektion i JavaScript Academy på CoddyKit. Detta är lektion 4 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 JavaScript Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i JavaScript Academy innehåller totalt 4 lektioner.

Reagera på lagringsändringar

Händelsen storage gör att en flik kan reagera när en annan flik ändrar localStorage. Den möjliggör enkel synkronisering mellan flikar.

Lyssna efter storage

Lägg till en lyssnare på window. Den utlöses i ANDRA flikar med samma origin när localStorage ändras, men inte i den flik som gjorde ändringen.

window.addEventListener("storage", (e) => {
  console.log("Key changed:", e.key);
});

StorageEvent-objektet

Händelsen innehåller key, oldValue, newValue, storageArea och url. Tillsammans beskriver de exakt vad som ändrades.

window.addEventListener("storage", (e) => {
  console.log(e.key, e.oldValue, "->", e.newValue);
});

Utlöses bara i andra flikar

En viktig detalj: Händelsen utlöses INTE i samma flik som anropade setItem. Den är avsedd att meddela de andra flikarna, så förlita er inte på den för uppdateringar i samma flik.

Mönster för synkronisering mellan flikar

Använd händelsen för att hålla flikarna synkroniserade, till exempel genom att logga ut användaren överallt när en flik tar bort autentiseringstoken.

window.addEventListener("storage", (e) => {
  if (e.key === "token" && e.newValue === null) {
    logoutUI();
  }
});

Upptäcka clear()

När clear() körs utlöses händelsen med key satt till null. Hantera det fallet för att återställa allt.

window.addEventListener("storage", (e) => {
  if (e.key === null) resetApp();
});

Lagringskvoten

Varje origin får en begränsad kvot, vanligtvis sammanlagt omkring 5 MB för localStorage. Det är mycket mindre än IndexedDB, så lagra bara begränsade mängder.

Fel vid överskriden kvot

Om kvoten överskrids kastas ett QuotaExceededError vid setItem. Omslut alltid stora eller otillförlitliga skrivningar med try/catch.

try {
  localStorage.setItem("big", hugeString);
} catch (e) {
  console.log("Storage full:", e.name);
}

UTF-16 kräver dubbelt så mycket utrymme

Strängar lagras som UTF-16, så varje tecken använder ungefär 2 byte. En kvot på 5 MB rymmer cirka 2,5 miljoner tecken, och färre när texten inte är ASCII.

Uppskatta användningen

Ni kan ungefär mäta användningen genom att summera längden på nycklar och värden. Det finns inget exakt API, men detta ger en användbar uppskattning.

let total = 0;
for (let i = 0; i < localStorage.length; i++) {
  const k = localStorage.key(i);
  total += k.length + localStorage.getItem(k).length;
}
console.log(total, "chars");

När något större behövs

För stora eller strukturerade datamängder på mer än några MB bör ni använda IndexedDB. Web Storage passar bäst för små flaggor, inställningar och tokenvärden.

Snabbtest

Lagringshändelser och begränsningar.

Besvara frågan i den interaktiva lektionen

Sammanfattning

Händelsen storage meddelar ANDRA flikar från en origin om ändringar i localStorage och innehåller key, oldValue och newValue (key är null vid clear). Kvoterna är ungefär 5 MB, och skrivningar som överskrider dem kastar QuotaExceededError. Omslut därför riskfyllda skrivningar med try/catch och använd IndexedDB för större datamängder.

Gratis att börja

Lär dig JavaScript 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: 59
Lektioner: 200

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”Lagringshändelser och begränsningar” gratis?

Ja – du kan läsa vilka 3 lektioner som helst i lärvägen JavaScript Academy, inklusive ”Lagringshändelser och begränsningar”, 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 JavaScript Academy innehåller totalt 4 lektioner.

Vad lär jag mig i ”Lagringshändelser och begränsningar”?

Reagera på ändringar och respektera kvotbegränsningar. Ni övar på JavaScript 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 JavaScript Academy?

Du behöver inga förkunskaper. Utbildningen i JavaScript 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 4 av 4.

Hur lång tid tar lektionen ”Lagringshändelser och begränsningar”?

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 JavaScript Academy-lektionen?

Ja. Varje JavaScript 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

← Tillbaka till JavaScript Academy