Erklären Sie den Unterschied zwischen Cookies, sessionStorage und localStorage.

Anwendungsbereich: Cookies sind sowohl auf der Client- als auch auf der Serverseite verfügbar. sessionStorage und localStorage sind nur auf der Clientseite verfügbar.

Lebensdauer: Für Cookies wird die Lebensdauer beim Erstellen festgelegt (mit dem Attribut expires oder max-age). Wenn nicht angegeben, werden Cookies beim Schließen des Browsers gelöscht. sessionStorage speichert Daten nur während der aktuellen Sitzung (bis zum Schließen des Tabs oder Fensters). localStorage speichert Daten unbegrenzt, bis sie explizit gelöscht werden.

Größe: Die maximale Größe für Cookies beträgt etwa 4 KB. Für sessionStorage und localStorage liegt sie je nach Browser zwischen 5 MB und 10 MB.

Versand bei jeder Anfrage: Cookies werden automatisch mit jeder HTTP-Anfrage an die Domain gesendet, für die sie gesetzt wurden, was den Traffic erhöhen kann. Daten in sessionStorage und localStorage werden nicht an den Server gesendet.

Zugriffsart: Der Zugriff auf Cookies erfolgt über document.cookie (String). Der Zugriff auf sessionStorage und localStorage erfolgt über die entsprechenden Objekte mit den Methoden setItem, getItem, removeItem und clear.

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

// Cookie abrufen
let x = document.cookie;

// Daten in sessionStorage setzen
sessionStorage.setItem("lastname", "Smith");

// Daten aus sessionStorage abrufen
let y = sessionStorage.getItem("lastname");

// Daten in localStorage setzen
localStorage.setItem("firstname", "Jane");

// Daten aus localStorage abrufen
let z = localStorage.getItem("firstname");

Merkmal	cookies	sessionStorage	localStorage
Anwendungsbereich	Client und Server	Nur Client	Nur Client
Lebensdauer	Beim Erstellen festgelegt (expires/max-age), sonst bis zum Schließen des Browsers	Bis zum Schließen des Tabs/Fensters	Unbegrenzt (bis zur expliziten Löschung)
Größe	~4 KB	~5-10 MB (abhängig vom Browser)	~5-10 MB (abhängig vom Browser)
Versand bei Anfrage	Ja	Nein	Nein
Zugriff	document.cookie	sessionStorage.getItem/setItem	localStorage.getItem/setItem