Daten im Browser speichern
Webseiten können Daten im Browser des Benutzers speichern, damit diese auch nach dem Neuladen der Seite oder beim nächsten Besuch noch verfügbar sind. Dies ist nützlich für Benutzereinstellungen, ungespeicherte Formulareingaben oder kleine Anwendungen, die ohne Server funktionieren sollen.
Web Storage API
Abschnitt betitelt „Web Storage API“Die Web Storage API bietet zwei einfache Möglichkeiten, Daten zu speichern:
- localStorage: Speichert Daten ohne Ablaufdatum
- sessionStorage: Speichert Daten für die Dauer der Browsersitzung
Beide speichern Daten in Form von Schlüssel-Wert-Paaren, wobei sowohl Schlüssel als auch Werte Strings sein müssen.
localStorage verwenden
Abschnitt betitelt „localStorage verwenden“// Daten speichernlocalStorage.setItem("benutzername", "Max");localStorage.setItem("theme", "dark");localStorage.setItem("eingeloggt", "true");
// Daten abrufenconst benutzername = localStorage.getItem("benutzername");console.log("Gespeicherter Benutzername:", benutzername);
// Prüfen, ob ein Wert existiertif (localStorage.getItem("theme")) { console.log("Theme-Einstellung gefunden!");}
// Daten entfernenlocalStorage.removeItem("eingeloggt");
// Alle Daten löschenlocalStorage.clear();sessionStorage verwenden
Abschnitt betitelt „sessionStorage verwenden“sessionStorage funktioniert genauso wie localStorage, aber die Daten werden gelöscht, wenn der Browser geschlossen wird:
// Daten speichernsessionStorage.setItem("suchbegriff", "JavaScript Tutorial");
// Daten abrufenconst letzterSuchbegriff = sessionStorage.getItem("suchbegriff");Objekte und Arrays speichern
Abschnitt betitelt „Objekte und Arrays speichern“Da Web Storage nur Strings speichern kann, müssen Objekte und Arrays umgewandelt werden:
// Objekt speichernconst benutzer = { name: "Anna", alter: 28, interessen: ["Programmieren", "Musik", "Sport"]};
localStorage.setItem("benutzer", JSON.stringify(benutzer));
// Objekt abrufenconst gespeicherterBenutzer = JSON.parse(localStorage.getItem("benutzer"));console.log("Name:", gespeicherterBenutzer.name);console.log("Interessen:", gespeicherterBenutzer.interessen);Praktisches Beispiel: Theme-Einstellung
Abschnitt betitelt „Praktisches Beispiel: Theme-Einstellung“// Theme-Umschalterconst themeButton = document.querySelector("#themeToggle");const body = document.body;
// Gespeichertes Theme beim Laden der Seite anwendenif (localStorage.getItem("theme") === "dark") { body.classList.add("dark-theme"); themeButton.textContent = "Helles Theme";}
themeButton.addEventListener("click", function() { // Theme umschalten if (body.classList.contains("dark-theme")) { body.classList.remove("dark-theme"); localStorage.setItem("theme", "light"); themeButton.textContent = "Dunkles Theme"; } else { body.classList.add("dark-theme"); localStorage.setItem("theme", "dark"); themeButton.textContent = "Helles Theme"; }});Beispiel: Formulardaten sichern
Abschnitt betitelt „Beispiel: Formulardaten sichern“const formular = document.querySelector("#kontaktFormular");const nameInput = document.querySelector("#name");const emailInput = document.querySelector("#email");const nachrichtInput = document.querySelector("#nachricht");
// Gespeicherte Daten beim Laden wiederherstellenwindow.addEventListener("DOMContentLoaded", function() { const formularDaten = JSON.parse(localStorage.getItem("kontaktFormular") || "{}");
nameInput.value = formularDaten.name || ""; emailInput.value = formularDaten.email || ""; nachrichtInput.value = formularDaten.nachricht || "";});
// Eingaben speichern, wenn sich etwas ändertfunction speichereFormular() { const formularDaten = { name: nameInput.value, email: emailInput.value, nachricht: nachrichtInput.value };
localStorage.setItem("kontaktFormular", JSON.stringify(formularDaten));}
nameInput.addEventListener("input", speichereFormular);emailInput.addEventListener("input", speichereFormular);nachrichtInput.addEventListener("input", speichereFormular);
// Formular löschen, wenn es abgeschickt wirdformular.addEventListener("submit", function() { localStorage.removeItem("kontaktFormular");});Grenzen von Web Storage
Abschnitt betitelt „Grenzen von Web Storage“- Begrenzter Speicherplatz (meist 5-10 MB pro Domain)
- Speichert nur Strings (Objekte müssen konvertiert werden)
- Synchrone API (kann bei grossen Datenmengen die Leistung beeinträchtigen)
- Keine komplexen Abfragen möglich
Übung: Einkaufsliste mit localStorage
Abschnitt betitelt „Übung: Einkaufsliste mit localStorage“Zusammenfassung
Abschnitt betitelt „Zusammenfassung“- Mit
localStorageundsessionStoragekönnen wir Daten im Browser speichern localStoragebehält Daten dauerhaft, währendsessionStoragesie beim Schliessen des Browsers löscht- Für komplexe Datenstrukturen wie Objekte und Arrays müssen wir
JSON.stringify()undJSON.parse()verwenden - Web Storage eignet sich für:
- Benutzereinstellungen (z.B. Theme-Präferenzen)
- Formulardaten sichern
- Kleine Anwendungen ohne Server (z.B. To-Do-Listen, Notizen)
- Cacheing von Daten zur Verbesserung der Leistung
Im nächsten Kapitel werden wir ein kleines Praxisprojekt umsetzen und eine funktionale Todo-App entwickeln.