Leg het verschil uit tussen cookies, sessionStorage en localStorage.

Cookies slaan kleine hoeveelheden tekstuele informatie (tot 4 KB) op de clientzijde, worden meegestuurd met elke HTTP-verzoek naar het domein dat ze heeft ingesteld. Ze kunnen een vervaldatum hebben. Worden gebruikt voor autorisatie, gebruikersvolging, opslag van gebruikersvoorkeuren.

localStorage slaat gegevens op zonder vervaldatum (zolang de gebruiker de opslag niet wist of de browser sluit) aan de clientzijde (tot 5-10MB afhankelijk van de browser). Gegevens zijn beschikbaar tussen browsersessies, maar alleen voor scripts van dezelfde oorsprong (domein, protocol, poort). Worden niet automatisch meegestuurd met HTTP-verzoeken. Gebruikt voor langdurige opslag en applicatie-instellingen.

sessionStorage slaat gegevens op gedurende één browsersessie (zolang het tabblad of venster open is). Gegevens worden verwijderd bij het sluiten van het tabblad of venster. De opslagcapaciteit is vergelijkbaar met localStorage (tot 5-10MB). Gegevens zijn alleen toegankelijk voor scripts van dezelfde oorsprong. Worden niet automatisch meegestuurd met HTTP-verzoeken. Gebruikt voor tijdelijke opslag van sessie-specifieke gegevens.

Kenmerk	Cookies	localStorage	sessionStorage
Opslagduur	Vervaldatum of browser sluiten	Zolang niet verwijderd door gebruiker/app	Zolang het tabblad of venster open is
Gegevensgrootte	Tot 4 KB	Tot 5-10MB	Tot 5-10MB
Toegankelijkheid	Worden meegestuurd met HTTP-verzoeken naar domein	Alleen via JavaScript van dezelfde oorsprong	Alleen via JavaScript van dezelfde oorsprong
Toegankelijkheid tussen tabbladen	Ja	Ja	Nee (voor verschillende tabbladen)
Doel	Authenticatie, tracking, voorkeuren	Langdurige opslag, instellingen	Tijdelijke opslag binnen sessie

Voorbeeld van gebruik van localStorage:

// Gegevens opslaan
localStorage.setItem('userName', 'Alice');

// Gegevens ophalen
const userName = localStorage.getItem('userName');
console.log(userName); // Output: Alice

// Gegevens verwijderen
// localStorage.removeItem('userName');

// Alles wissen
// localStorage.clear();

Voorbeeld van gebruik van sessionStorage:

// Gegevens opslaan
sessionStorage.setItem('orderId', '12345');

// Gegevens ophalen
const orderId = sessionStorage.getItem('orderId');
console.log(orderId); // Output: 12345

// Gegevens verwijderen
// sessionStorage.removeItem('orderId');

// Alles wissen
// sessionStorage.clear();