Leg het verschil uit tussen cookies, sessionStorage…

Cookies, sessionStorage en localStorage zijn mechanismen voor webopslag die verschillen in doel, levensduur en hoeveelheid opgeslagen gegevens.

Cookies: Kleine gegevensfragmenten die door de webserver worden verzonden en door de webbrowser op de computer van de gebruiker worden opgeslagen. Ze worden bij elke volgende aanvraag naar dezelfde server gestuurd. Gebruikt voor authenticatie, opslag van gebruikersvoorkeuren, volgen van winkelwagenstatus.
- Levensduur: Bij creatie ingesteld (kan sessiegebonden of met een vaste vervaldatum zijn).
- Hoeveelheid: Beperkt, meestal enkele kilobytes (ongeveer 4 KB).
sessionStorage: Slaat gegevens alleen op voor één browsersessie (geopende tab of venster). Gegevens worden verwijderd bij het sluiten van de tab of het venster.
- Levensduur: Tot het sluiten van de tab of het venster.
- Hoeveelheid: Veel groter dan cookies (meestal enkele megabytes).
localStorage: Slaat gegevens op zonder vervaldatum, totdat ze expliciet door de gebruiker of een script worden verwijderd. Beschikbaar in alle tabbladen en vensters van hetzelfde domein.
- Levensduur: Permanent (tot expliciete verwijdering).
- Hoeveelheid: Veel groter dan cookies (meestal enkele megabytes).

Hier een korte vergelijking:

Mechanisme	Levensduur	Toegankelijkheid	Verzendt naar server	Hoeveelheid (typisch)	Doel
Cookies	Sessiebinding of met vervaldatum	Via HTTP-headers	Ja	~4 KB	Authenticatie, tracking, voorkeuren
sessionStorage	Tot het sluiten van tab of venster	Via JS API	Nee	~5-10 MB	Tijdelijk opslaan van sessiegegevens
localStorage	Permanent (tot verwijdering)	Via JS API	Nee	~5-10 MB	Langdurige gegevensopslag

Voorbeelden van gebruik met JavaScript API:

// Cookies (toegang via document.cookie, vereist handmatige parsing en serialisatie)
document.cookie = "username=John Doe; expires=Thu, 18 Dec 2023 12:00:00 UTC; path=/";

// sessionStorage
sessionStorage.setItem('id', '123');
let userId = sessionStorage.getItem('id');
sessionStorage.removeItem('id');

// localStorage
localStorage.setItem('theme', 'dark');
let userTheme = localStorage.getItem('theme');
localStorage.removeItem('theme');
localStorage.clear(); // Verwijdert alle gegevens in localStorage

Leg het verschil uit tussen cookies, sessionStorage en localStorage.