Webanwendungen müssen Daten auf der Client-Seite speichern – Benutzereinstellungen, Authentifizierungstoken, gecachte Daten, Warenkorbinhalte, Entwurfsdaten von Formularen. Browser bieten verschiedene Speichermechanismen, jeder mit unterschiedlichen Merkmalen. Die Wahl des falschen kann zu Performance-Engpässen, Sicherheitslücken oder Datenverlust führen.

Schneller Überblick

Speicheroptionen im Überblick
Merkmal          localStorage    sessionStorage   Cookies          IndexedDB
──────────────────────────────────────────────────────────────────────────────
Kapazität        5-10 MB         5-10 MB          ~4 KB/Cookie     100MB+
Persistenz       Permanent       Tab-Lebensdauer  Konfigurierbar   Permanent
An Server gesendet Nein              Nein               Ja (jeder Req)   Nein
Zugriff          Sync JS         Sync JS          JS + HTTP        Async JS
Datenformat      String          String           String           Beliebig (Objekte)
Anwendungsfall   Einstellungen   Temporärer Zustand   Authentifizierungstoken   Grosse Datensätze

localStorage

Speichert Schlüssel-Wert-Paare ohne Verfallsdatum. Daten bleiben erhalten, bis sie explizit vom Benutzer oder Ihrem Code gelöscht werden.

localStorage API
// Daten speichern (nur Strings)
localStorage.setItem('theme', 'dark');
localStorage.setItem('user', JSON.stringify({ name: 'Alice', id: 123 }));

// Daten abrufen
const theme = localStorage.getItem('theme'); // "dark"
const user = JSON.parse(localStorage.getItem('user'));

// Spezifisches Element entfernen
localStorage.removeItem('theme');

// Alle Daten löschen
localStorage.clear();

// Speichernutzung prüfen
const used = new Blob(Object.values(localStorage)).size;
console.log(`${(used / 1024).toFixed(1)} KB belegt`);

Am besten geeignet für: Themeneinstellungen, Sprachwahl, UI-Zustände (Seitenleiste offen/geschlossen), nicht sensible Einstellungen.

⚠️ Speichern Sie niemals: Authentifizierungstoken, Passwörter oder sensible Daten. localStorage ist für jeden JavaScript-Code auf der Seite zugänglich, einschliesslich XSS-eingeschleuster Skripte.

sessionStorage

Identische API wie localStorage, aber die Daten sind auf den aktuellen Browser-Tab beschränkt und werden gelöscht, wenn der Tab geschlossen wird.

Anwendungsfall sessionStorage
// Formulardaten speichern (wiederherstellbar bei versehentlicher Navigation)
const formData = { name: nameInput.value, email: emailInput.value };
sessionStorage.setItem('formDraft', JSON.stringify(formData));

// Bei Seitenaufruf wiederherstellen
window.addEventListener('load', () => {
  const draft = sessionStorage.getItem('formDraft');
  if (draft) {
    const { name, email } = JSON.parse(draft);
    nameInput.value = name;
    emailInput.value = email;
  }
});

Am besten geeignet für: Daten für mehrstufige Formulare, temporäre Zustände in Wizards, tab-spezifische Daten, die nicht zwischen Tabs durchsickern sollen.

Cookies

Der älteste Speichermechanismus. Im Gegensatz zu localStorage werden Cookies bei jeder HTTP-Anfrage an den Server gesendet – das macht sie ideal für die Authentifizierung, aber schlecht für die Speicherung grosser Datenmengen.

Sichere Cookie-Konfiguration
// Cookie setzen (serverseitig – Express.js)
res.cookie('session_id', 'abc123', {
  httpOnly: true,   // JavaScript kann dieses Cookie nicht lesen (XSS-Schutz)
  secure: true,     // Nur über HTTPS gesendet
  sameSite: 'Lax',  // CSRF-Schutz
  maxAge: 86400000, // Läuft in 24 Stunden ab (Millisekunden)
  path: '/',
});

// Cookie setzen (Client-seitiges JavaScript)
document.cookie = "theme=dark; path=/; max-age=31536000; SameSite=Lax";

// Cookies lesen (Client-seitig) – umständliche API
const theme = document.cookie
  .split('; ')
  .find(row => row.startsWith('theme='))
  ?.split('=')[1]; // "dark"

Am besten geeignet für: Sitzungs-IDs, Authentifizierungstoken (mit httpOnly + secure + sameSite).

⚠️ Wichtige Cookie-Flags:

  • httpOnly — Kann nicht von JavaScript gelesen werden (verhindert XSS-Token-Diebstahl)
  • secure — Nur über HTTPS gesendet
  • sameSite=Lax|Strict — CSRF-Schutz

IndexedDB

Eine vollwertige clientseitige Datenbank. Speichert strukturierte Daten (Objekte, Dateien, Blobs) mit Indizes für die Abfrage. Asynchrone API. Kapazität von Hunderten von Megabytes.

IndexedDB Beispiel
// Datenbank öffnen
const request = indexedDB.open('MyApp', 1);

request.onupgradeneeded = (event) => {
  const db = event.target.result;
  const store = db.createObjectStore('products', { keyPath: 'id' });
  store.createIndex('category', 'category', { unique: false });
};

request.onsuccess = (event) => {
  const db = event.target.result;

  // Daten hinzufügen
  const tx = db.transaction('products', 'readwrite');
  tx.objectStore('products').add({
    id: 1,
    name: 'Widget',
    category: 'Werkzeuge',
    price: 29.99,
  });

  // Daten lesen
  const getTx = db.transaction('products', 'readonly');
  const getReq = getTx.objectStore('products').get(1);
  getReq.onsuccess = () => console.log(getReq.result);
};

Am besten geeignet für: Offline-fähige Apps, Caching grosser Datensätze, Speicherung von Dateien/Blobs, Progressive Web Apps (PWAs).

Entscheidungsleitfaden

  • Theme-/Spracheinstellungen? → localStorage
  • Entwurfsdaten für Formulare? → sessionStorage
  • Sitzungsauthentifizierung? → HttpOnly Secure Cookie
  • Warenkorb? → localStorage (Gast) oder serverseitig (eingeloggt)
  • Offline-Datencache? → IndexedDB
  • Speicherung grosser Dateien? → IndexedDB
  • Daten vom Server benötigt? → Cookie

Probieren Sie unsere kostenlosen Entwicklertools aus

Kodieren und dekodieren Sie Daten für die clientseitige Speicherung.