Leg het verschil uit tussen cookies, sessionStorage en localStorage.

Toepassingsgebied: Cookies zijn beschikbaar aan zowel de client- als serverzijde. sessionStorage en localStorage zijn alleen beschikbaar aan de clientzijde.

Levensduur: Voor cookies wordt de levensduur ingesteld bij het aanmaken (met het attribuut expires of max-age). Als niet gespecificeerd, worden cookies verwijderd bij het sluiten van de browser. sessionStorage slaat gegevens alleen op gedurende de huidige sessie (tot het sluiten van het tabblad of venster). localStorage slaat gegevens onbepaald op, totdat ze expliciet worden verwijderd.

Grootte: De maximale grootte voor cookies is ongeveer 4 KB. Voor sessionStorage en localStorage ligt dit tussen 5 MB en 10 MB, afhankelijk van de browser.

Verzending bij elke aanvraag: Cookies worden automatisch meegestuurd met elke HTTP-aanvraag naar het domein waarvoor ze zijn ingesteld, wat het verkeer kan vergroten. Gegevens in sessionStorage en localStorage worden niet naar de server gestuurd.

Toegangswijze: Toegang tot cookies gebeurt via document.cookie (string). Toegang tot sessionStorage en localStorage gebeurt via de respectievelijke objecten met behulp van de methoden setItem, getItem, removeItem en clear.

// Cookie instellen
document.cookie = "username=John Doe; expires=Thu, 18 Dec 2023 12:00:00 UTC; path=/";

// Cookie ophalen
let x = document.cookie;

// Gegevens in sessionStorage zetten
sessionStorage.setItem("lastname", "Smith");

// Gegevens uit sessionStorage halen
let y = sessionStorage.getItem("lastname");

// Gegevens in localStorage zetten
localStorage.setItem("firstname", "Jane");

// Gegevens uit localStorage halen
let z = localStorage.getItem("firstname");

Kenmerk	cookies	sessionStorage	localStorage
Toepassingsgebied	Client en Server	Alleen Client	Alleen Client
Levensduur	Instellen bij creatie (expires/max-age), anders tot het sluiten van de browser	Tot het sluiten van het tabblad of venster	Onbeperkt (totdat expliciet verwijderd)
Grootte	~4 KB	~5-10 MB (afhankelijk van browser)	~5-10 MB (afhankelijk van browser)
Verzending met verzoek	Ja	Nee	Nee
Toegang	document.cookie	sessionStorage.getItem/setItem	localStorage.getItem/setItem