Daten im Browser speichern

Der Browser kann kleine Datenmengen auf dem Gerät speichern, auch nach dem Schließen der Seite.

localStorage

localStorage speichert Schlüssel-Wert-Paare, nur als Text:

localStorage.setItem("name", "Mia");
console.log(localStorage.getItem("name"));      // "Mia"
console.log(localStorage.getItem("gibtsnicht")); // null
localStorage.removeItem("name");
localStorage.clear();                            // alles löschen
console.log(localStorage.length);

Objekte und Listen wandelst du mit JSON um:

Wichtige Regeln

• Speichere keine Passwörter oder Tokens im localStorage: Jedes Skript auf der Seite kann es lesen
• Daten gelten pro Origin (Protokoll + Domain + Port)
• Lies Daten niemals blind: Nutzer können sie ändern. Immer prüfen und mit Standardwerten absichern
• Das Ereignis storage meldet Änderungen aus anderen Tabs

window.addEventListener("storage", (e) => {
  console.log(e.key, e.oldValue, "->", e.newValue);
});

Cookies

Cookies werden bei jeder Anfrage an den Server mitgeschickt, deshalb eignen sie sich für Anmeldungen. Sie werden meist vom Server mit Set-Cookie gesetzt:

Set-Cookie: sitzung=abc123; HttpOnly; Secure; SameSite=Lax; Max-Age=3600; Path=/

In JavaScript: document.cookie = "thema=dunkel; max-age=31536000; path=/". Das Lesen ist umständlich. Für reine Einstellungen reicht localStorage.

IndexedDB

Für große oder strukturierte Daten (Offline-Apps) gibt es IndexedDB, eine asynchrone Datenbank im Browser. Sie ist sperrig, deshalb nutzt man meist die Bibliothek idb oder Dexie.

Einstellungen speichern (Beispiel)