Browser Storage: LocalStorage, SessionStorage & Cookies

Der Browser bietet verschiedene Methoden zur Datenspeicherung. Dieser Guide erklärt die Unterschiede und wann Sie welche Methode nutzen sollten.

Übersicht der Speichermethoden

LocalStorage

Speichert Daten permanent im Browser bis sie explizit gelöscht werden.

Grundlegende Operationen

// Speichern
localStorage.setItem('username', 'Max');

// Lesen
const username = localStorage.getItem('username');

// Löschen
localStorage.removeItem('username');

// Alles löschen
localStorage.clear();

// Alle Keys durchgehen
for (let i = 0; i < localStorage.length; i++) {
  const key = localStorage.key(i);
  console.log(key, localStorage.getItem(key));
}

Objekte speichern (JSON)

// Speichern
const user = { name: 'Max', age: 30 };
localStorage.setItem('user', JSON.stringify(user));

// Lesen
const storedUser = JSON.parse(localStorage.getItem('user'));
console.log(storedUser.name); // Max

Mit Ablaufdatum

// Speichern mit TTL
function setWithExpiry(key, value, ttl) {
  const item = {
    value: value,
    expiry: Date.now() + ttl
  };
  localStorage.setItem(key, JSON.stringify(item));
}

// Lesen mit Ablauf-Check
function getWithExpiry(key) {
  const itemStr = localStorage.getItem(key);
  if (!itemStr) return null;

  const item = JSON.parse(itemStr);
  if (Date.now() > item.expiry) {
    localStorage.removeItem(key);
    return null;
  }
  return item.value;
}

// Verwendung: 1 Stunde TTL
setWithExpiry('token', 'abc123', 60 * 60 * 1000);

SessionStorage

Wie LocalStorage, aber Daten werden beim Schließen des Tabs gelöscht.

// Gleiche API wie LocalStorage
sessionStorage.setItem('tempData', 'value');
const data = sessionStorage.getItem('tempData');
sessionStorage.removeItem('tempData');
sessionStorage.clear();

Anwendungsfälle

• Formular-Zwischenstände
• Temporäre UI-Zustände
• Wizard/Multi-Step-Prozesse
• Tab-spezifische Daten

Cookies

Cookie setzen

// Einfaches Cookie
document.cookie = "username=Max";

// Mit Ablaufdatum
document.cookie = "username=Max; expires=Fri, 31 Dec 2025 23:59:59 GMT";

// Mit Max-Age (Sekunden)
document.cookie = "username=Max; max-age=3600"; // 1 Stunde

// Mit Path und Domain
document.cookie = "username=Max; path=/; domain=example.com";

// Secure (nur HTTPS) und HttpOnly (kein JS-Zugriff)
document.cookie = "token=abc; secure; samesite=strict";

Cookie lesen

// Alle Cookies als String
console.log(document.cookie);
// "username=Max; theme=dark"

// Bestimmtes Cookie extrahieren
function getCookie(name) {
  const value = `; ${document.cookie}`;
  const parts = value.split(`; ${name}=`);
  if (parts.length === 2) return parts.pop().split(';').shift();
  return null;
}

const username = getCookie('username');

Cookie löschen

// Ablaufdatum in Vergangenheit setzen
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT";

Cookie-Attribute

Wann was verwenden?

Sicherheitshinweise

Storage Events (für Multi-Tab)

// Reagieren auf Änderungen in anderen Tabs
window.addEventListener('storage', event => {
  console.log('Key geändert:', event.key);
  console.log('Alter Wert:', event.oldValue);
  console.log('Neuer Wert:', event.newValue);
  console.log('URL:', event.url);

  // z.B. Logout in allen Tabs
  if (event.key === 'logout') {
    window.location.href = '/login';
  }
});

IndexedDB für große Datenmengen

Für komplexe Daten oder große Mengen:

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

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

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

  // Daten speichern
  const tx = db.transaction('users', 'readwrite');
  tx.objectStore('users').add({ id: 1, name: 'Max', email: 'max@test.de' });

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

Weitere Informationen

• 🍪 Cookie-Banner Pflicht
• 🔒 DSGVO Checkliste
• ⚡ Service Worker & PWA