LocalStorage

LocalStorage ist ein Speicher im Browser, mit dem du Daten dauerhaft speichern kannst. Die Daten bleiben auch dann erhalten, wenn der Benutzer den Browser schließt oder den Computer neu startet.

LocalStorage kann nur Strings speichern – wie du z. B. Objekte in Strings umwandelst, lernst du weiter unten.

Es eignet sich hervorgand für Sachen wie:

• 🌙 Dark Mode speichern
• 🌐 Spracheinstellungen speichern
• 🛒 Warenkorb speichern
• 📝 To-Do-Listen speichern
• ⚙️ Benutzereinstellungen speichern

Daten speichern und auslesen

Mit setItem() schreibst du einen Wert unter einem Schlüssel in den Speicher. Mit getItem() liest du ihn wieder aus. Beide Methoden arbeiten mit Schlüssel-Wert-Paaren – ähnlich wie bei Objekten.

1localStorage.setItem("name", "Anna");
2
3const name = localStorage.getItem("name");
4console.log(name);

Gibt es keinen Eintrag für den Schlüssel, liefert getItem() den Wert null.

Daten löschen

Einen einzelnen Eintrag entfernst du mit removeItem(). Mit clear() löschst du alle gespeicherten Daten der aktuellen Website auf einmal.

1localStorage.removeItem("name");
2
3localStorage.clear();

Achtung: clear() kann nicht rückgängig gemacht werden – alle Schlüssel der Domain sind danach weg.

Objekte und Arrays speichern

Weil localStorage nur Strings akzeptiert, wandelst du komplexe Daten mit JSON.stringify() in Text um. Beim Auslesen machst du mit JSON.parse() wieder ein JavaScript-Objekt daraus – wie im Kapitel JSON erklärt.

1const user = {
2    name: "Anna",
3    alter: 25
4};
5
6localStorage.setItem("user", JSON.stringify(user));
7
8const gespeichert = localStorage.getItem("user");
9const userAusStorage = JSON.parse(gespeichert);
10
11console.log(userAusStorage.name);
12console.log(userAusStorage.alter);

Praktisches Beispiel

Beim Theme Toggle speicherst du die gewählte Ansicht in localStorage. Beim nächsten Besuch liest du den Wert aus und stellst das Theme wieder her – so bleibt die Wahl des Nutzers erhalten.

1function setTheme(theme) {
2    document.documentElement.dataset.theme = theme;
3    localStorage.setItem("theme", theme);
4}
5
6const savedTheme = localStorage.getItem("theme") || "dark";
7setTheme(savedTheme);

Ausführlicher erklärt findest du das im Kapitel Theme Toggle (Dark Mode).

Wichtige Hinweise

Kurz gesagt: setItem() speichert, getItem() liest aus, removeItem() löscht einen Eintrag. Für Objekte kombinierst du localStorage mit JSON.stringify() und JSON.parse().