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

Cookies, sessionStorage und localStorage sind Mechanismen des Web-Speichers, die sich in Zweck, Lebensdauer und Datenvolumen unterscheiden.

• Cookies: Kleine Datenfragmente, die vom Webserver gesendet und im Browser des Nutzers gespeichert werden. Sie werden bei jeder nachfolgenden Anfrage an denselben Server gesendet. Sie werden für Authentifizierung, Speicherung von Nutzerpräferenzen, Verfolgung des Warenkorbstatus verwendet.

  • Lebensdauer: Beim Erstellen festgelegt (kann Sitzungs- oder mit festem Ablaufdatum sein).
  • Volumen: Begrenzt, in der Regel einige Kilobyte (ca. 4 KB).

• sessionStorage: Speichert Daten nur für eine Browsersitzung (geöffnete Registerkarte oder Fenster). Die Daten werden beim Schließen der Registerkarte oder des Fensters gelöscht.

  • Lebensdauer: Bis zum Schließen der Registerkarte oder des Fensters.
  • Volumen: Deutlich größer als bei Cookies (in der Regel mehrere Megabyte).

• localStorage: Speichert Daten ohne Ablaufdatum, bis sie explizit vom Nutzer oder Skript gelöscht werden. In allen Registerkarten und Fenstern derselben Domain verfügbar.

  • Lebensdauer: Permanent (bis zur expliziten Löschung).
  • Volumen: Deutlich größer als bei Cookies (in der Regel mehrere Megabyte).

Hier eine kurze Vergleichstabelle:

Mechanismus	Lebensdauer	Verfügbarkeit	Wird an den Server gesendet	Volumen (typisch)	Zweck
Cookies	Sitzungsbasiert oder mit Ablaufdatum	Über HTTP-Header	Ja	~4 KB	Authentifizierung, Verfolgung, Präferenzen
sessionStorage	Bis zum Schließen des Tabs/Fensters	Über JS API	Nein	~5-10 MB	Temporäres Speichern von Sitzungsdaten
localStorage	Permanent (bis gelöscht)	Über JS API	Nein	~5-10 MB	Langfristige Datenspeicherung

Beispiele für die Nutzung der JavaScript API:

// Cookies (über document.cookie zugänglich, erfordert manuelles Parsen und Serialisieren)
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(); // Löscht alle Daten in localStorage