JavaScript: Daten im Browser speichern

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

Teil des Kurses JavaScript

Kapitel 31 von 40 im Kurs JavaScript. Mit Fortschritt, Quiz und Zertifikat auf der Lernseite.

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

Speicher	Größe	Lebensdauer	Mit dem Server geteilt?
localStorage	ca. 5 MB	bleibt dauerhaft	nein
sessionStorage	ca. 5 MB	bis der Tab schließt	nein
Cookies	ca. 4 KB	frei einstellbar	ja, bei jeder Anfrage
IndexedDB	sehr groß	dauerhaft	nein

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:

speicher1.html

<button id="plus">+1</button> <button id="reset">Zurücksetzen</button>
<p>Du hast <b id="zahl">0</b> Mal geklickt (bleibt nach dem Neuladen erhalten, sofern Speicher erlaubt ist).</p>
<script>
  function lade() {
    try { return JSON.parse(localStorage.getItem("zaehler")) ?? { klicks: 0 }; }
    catch { return { klicks: 0 }; }
  }
  function speichere(d) {
    try { localStorage.setItem("zaehler", JSON.stringify(d)); } catch {}
  }
  const daten = lade();
  const zahl = document.getElementById("zahl");
  zahl.textContent = daten.klicks;
  document.getElementById("plus").onclick = () => { daten.klicks++; zahl.textContent = daten.klicks; speichere(daten); };
  document.getElementById("reset").onclick = () => { daten.klicks = 0; zahl.textContent = 0; speichere(daten); };
</script>

Achtung

Greife auf localStorage immer in try/catch zu. Im privaten Modus, bei blockierten Cookies oder vollem Speicher wirft der Zugriff einen Fehler.

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=/

Attribut	Bedeutung
HttpOnly	JavaScript kann das Cookie nicht lesen (Schutz vor XSS)
Secure	nur über HTTPS
SameSite=Lax/Strict	Schutz vor Cross-Site-Anfragen (CSRF)
Max-Age, Expires	Lebensdauer

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

Hinweis

Wenn du Cookies zu Tracking oder Analyse setzt, brauchst du in der EU eine Einwilligung (Cookie-Banner). Technisch notwendige Cookies, etwa für die Anmeldung, sind ausgenommen.

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)

speicher2.html

<label><input type="checkbox" id="dunkel"> Dunkles Design</label>
<script>
  const box = document.getElementById("dunkel");
  try { box.checked = localStorage.getItem("dunkel") === "1"; } catch {}
  function anwenden() {
    document.body.style.background = box.checked ? "#222" : "#fff";
    document.body.style.color = box.checked ? "#eee" : "#000";
    try { localStorage.setItem("dunkel", box.checked ? "1" : "0"); } catch {}
  }
  box.addEventListener("change", anwenden);
  anwenden();
</script>

Merke

• localStorage speichert dauerhaft nur Text; Objekte über JSON
• sessionStorage gilt nur für den Tab
• Zugriffe in try/catch setzen und Daten beim Lesen prüfen
• Keine Passwörter im Web-Speicher; für Anmeldungen HttpOnly-Cookies
• Tracking-Cookies brauchen Einwilligung

Übungsaufgabe

Speichere eine Einkaufsliste (Array von Texten) im localStorage und zeige sie beim Neuladen der Seite wieder an.

Quiz zur Selbstkontrolle

Was kann localStorage speichern?

• Nur Text (Strings) (richtig)
• Beliebige Objekte
• Nur Zahlen
• Funktionen

Welches Cookie-Attribut verhindert den Zugriff per JavaScript?

• HttpOnly (richtig)
• Secure
• SameSite
• Path

Warum greift man auf localStorage in try/catch zu?

• Der Zugriff kann im privaten Modus oder bei vollem Speicher fehlschlagen (richtig)
• Er ist immer langsam
• Er ist verboten
• Er braucht Root-Rechte

Weiter im Kurs

Zurück: Formulare und Eingaben

Weiter: Nützliche Browser-APIs

Alle Kapitel: JavaScript im Überblick