JavaScript Academy · Les

localStorage versus sessionStorage

Kies de juiste opslagduur.

Les 2 van 413 stappen

localStorage versus sessionStorage is een gratis JavaScript Academy-les op CoddyKit. Dit is les 2 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.

Twee opslagplaatsen, dezelfde API

localStorage en sessionStorage hebben dezelfde methoden. Het verschil is de levensduur: hoe lang de gegevens bewaard blijven.

localStorage blijft bewaard

Gegevens in localStorage blijven staan totdat je ze expliciet verwijdert. Ze blijven behouden na het vernieuwen van de pagina, het sluiten van tabbladen en het opnieuw starten van de browser.

localStorage.setItem("theme", "dark");
// Still there days later, after closing the browser

sessionStorage is tijdelijk

Gegevens in sessionStorage blijven alleen bewaard tijdens de tabsessie. Als je het tabblad sluit, worden ze gewist.

sessionStorage.setItem("step", "2");
// Gone once the tab is closed

Isolatie per tabblad

Elk browsertabblad krijgt een eigen sessionStorage. Twee tabbladen van dezelfde website hebben afzonderlijke sessieopslag; ze delen GEEN gegevens.

localStorage wordt gedeeld

Daarentegen delen alle tabbladen en vensters van dezelfde origin één localStorage. Een wijziging in het ene tabblad is zichtbaar in de andere.

Gedrag bij vernieuwen

Bij normaal vernieuwen blijft sessionStorage voor dat tabblad behouden. Het dupliceren van een tabblad kan de sessie kopiëren, maar een nieuw tabblad begint leeg.

sessionStorage.setItem("draft", text);
// Survives F5 reload in the same tab

Tussen beide kiezen

Gebruik localStorage voor voorkeuren die lang bewaard moeten blijven (thema, taal). Gebruik sessionStorage voor tijdelijke status per tabblad (een stap in een wizard, een eenmalige conceptversie van een formulier).

Waarschuwing voor beveiliging

Geen van beide opslagplaatsen is veilig. Beide zijn leesbaar voor elk script op de pagina. Sla er daarom nooit wachtwoorden of gevoelige tokens in op die privé moeten blijven.

Overal dezelfde methoden

Omdat de API's overeenkomen, kun je de ene opslagplaats vervangen door de andere door alleen de objectnaam te wijzigen. Code die tegen de ene werkt, werkt ook tegen de andere.

const store = useSession ? sessionStorage : localStorage;
store.setItem("k", "v");

Privé browsen

In privémodi of incognitomodi worden beide opslagplaatsen doorgaans gewist wanneer de sessie eindigt, en sommige browsers beperken of deactiveren ze. Houd altijd rekening met de mogelijkheid dat het schrijven mislukt.

try {
  localStorage.setItem("k", "v");
} catch (e) {
  console.log("storage unavailable");
}

Het quotum staat los van elkaar

Elke opslagplaats heeft een eigen quotum (vaak ongeveer 5 MB per origin). Als je sessionStorage vult, gaat dat niet ten koste van het localStorage-budget.

Korte controle

De twee opslagplaatsen vergelijken.

Beantwoord dit in de interactieve les

Samenvatting

Beide opslagplaatsen hebben dezelfde API, maar verschillen in levensduur. localStorage blijft tussen sessies bestaan en wordt gedeeld door alle tabbladen van een origin; sessionStorage bestaat slechts tijdens één tabsessie en is per tabblad geïsoleerd. Geen van beide is veilig en elke opslagplaats heeft een eigen quotum van ongeveer 5 MB.

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 “localStorage versus sessionStorage” gratis?

Ja — je kunt hier op het web alle 3 lessen van het leerpad JavaScript Academy, waaronder “localStorage versus sessionStorage”, 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 “localStorage versus sessionStorage”?

Kies de juiste opslagduur. 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 2 van 4.

Hoe lang duurt de les “localStorage versus sessionStorage”?

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