JavaScript Academy · Les

Storage-events en limieten

Reageer op wijzigingen en houd rekening met quot alimieten.

Les 4 van 413 stappen

Storage-events en limieten is een gratis JavaScript Academy-les op CoddyKit. Dit is les 4 van 4. Je kunt 3 lessen uit dit leerpad gratis volledig lezen — daarna ontgrendelt CoddyKit PRO alle lessen, plus praktische oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject JavaScript Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus JavaScript Academy bevat in totaal 4 lessen.

Reageren op wijzigingen in opslag

De storage-gebeurtenis zorgt ervoor dat één tabblad kan reageren wanneer een ander tabblad localStorage wijzigt. Hiermee kun je eenvoudig tussen tabbladen synchroniseren.

Naar opslag luisteren

Voeg een luisteraar toe aan window. Deze wordt geactiveerd in ANDERE tabbladen van dezelfde origin zodra localStorage verandert, niet in het tabblad waarin de wijziging is aangebracht.

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

Het StorageEvent-object

De gebeurtenis bevat key, oldValue, newValue, storageArea en url. Samen beschrijven ze precies wat er is gewijzigd.

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

Alleen in andere tabbladen actief

Een belangrijke subtiliteit: de gebeurtenis wordt NIET geactiveerd in hetzelfde tabblad dat setItem heeft aangeroepen. De gebeurtenis is bedoeld om de andere tabbladen te informeren, dus vertrouw er niet op voor updates binnen hetzelfde tabblad.

Patroon voor synchronisatie tussen tabbladen

Gebruik de gebeurtenis om tabbladen consistent te houden, bijvoorbeeld door de gebruiker overal uit te loggen wanneer één tabblad het authenticatietoken wist.

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

clear() herkennen

Wanneer clear() wordt uitgevoerd, wordt de gebeurtenis geactiveerd met key ingesteld op null. Handel dat geval af om alles opnieuw in te stellen.

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

Het opslagquotum

Elke origin krijgt een beperkte hoeveelheid opslagruimte, meestal in totaal ongeveer 5MB voor localStorage. Dat is veel minder dan bij IndexedDB, dus sla alleen beperkte hoeveelheden gegevens op.

Fouten bij overschrijding van het quotum

Als je het quotum overschrijdt, veroorzaakt setItem een QuotaExceededError. Omring grote of niet-vertrouwde schrijfbewerkingen altijd met try/catch.

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

UTF-16 telt dubbel

Teksten worden opgeslagen als UTF-16, waardoor elk teken ongeveer 2 bytes gebruikt. Een quotum van 5MB bevat ongeveer 2,5 miljoen tekens, en minder bij tekst met niet-ASCII-tekens.

Gebruik schatten

Je kunt het gebruik bij benadering meten door de lengtes van alle sleutels en waarden op te tellen. Er is geen exacte API, maar hiermee krijg je een bruikbare schatting.

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");

Wanneer je iets groters nodig hebt

Gebruik voor grote of gestructureerde gegevens van meer dan enkele MB IndexedDB. Web Storage is het meest geschikt voor kleine vlaggen, voorkeuren en tokens.

Korte controle

Opslaggebeurtenissen en limieten.

Beantwoord dit in de interactieve les

Samenvatting

De storage-gebeurtenis informeert ANDERE tabbladen van een origin over wijzigingen in localStorage en bevat key, oldValue en newValue (key is null bij clear). Quota zijn ongeveer 5MB en schrijven daar voorbij veroorzaakt een QuotaExceededError. Omring risicovolle schrijfbewerkingen daarom met try/catch en gebruik IndexedDB voor grotere gegevens.

Gratis beginnen

Leer JavaScript met een AI-tutor — gratis

Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.

Cursussen: 59
Lessen: 200

Gratis beginnen met leren Bekijk de volledige cursus

Veelgestelde vragen

Is de les “Storage-events en limieten” gratis?

Ja — je kunt hier op het web alle 3 lessen van het leerpad JavaScript Academy, waaronder “Storage-events en limieten”, gratis volledig lezen. Daarna ontgrendelt CoddyKit PRO alle lessen, plus interactieve oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. De cursus JavaScript Academy bevat in totaal 4 lessen.

Wat leer ik in “Storage-events en limieten”?

Reageer op wijzigingen en houd rekening met quot alimieten. Je oefent met JavaScript Academy door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.

Heb ik ervaring nodig om met JavaScript Academy te beginnen?

Ervaring vooraf is niet nodig. JavaScript Academy op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 4 van 4.

Hoe lang duurt de les “Storage-events en limieten”?

De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.

Kan ik code schrijven en uitvoeren in deze les over JavaScript Academy?

Ja. Elke les over JavaScript Academy bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.

Alle lessen in deze cursus

← Terug naar JavaScript Academy