Zum Inhalt springen
IBAW Web Engineer

Daten im Browser speichern

Zu normalem Modus wechseln

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:

  1. localStorage: Speichert Daten ohne Ablaufdatum
  2. 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 speichern
localStorage.setItem("benutzername", "Max");
localStorage.setItem("theme", "dark");
localStorage.setItem("eingeloggt", "true");


// Daten abrufen
const benutzername = localStorage.getItem("benutzername");
console.log("Gespeicherter Benutzername:", benutzername);


// Prüfen, ob ein Wert existiert
if (localStorage.getItem("theme")) {
    console.log("Theme-Einstellung gefunden!");
}


// Daten entfernen
localStorage.removeItem("eingeloggt");


// Alle Daten löschen
localStorage.clear();

sessionStorage verwenden

Abschnitt betitelt „sessionStorage verwenden“

sessionStorage funktioniert genauso wie localStorage, aber die Daten werden gelöscht, wenn der Browser geschlossen wird:

// Daten speichern
sessionStorage.setItem("suchbegriff", "JavaScript Tutorial");


// Daten abrufen
const 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 speichern
const benutzer = {
    name: "Anna",
    alter: 28,
    interessen: ["Programmieren", "Musik", "Sport"]
};


localStorage.setItem("benutzer", JSON.stringify(benutzer));


// Objekt abrufen
const 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-Umschalter
const themeButton = document.querySelector("#themeToggle");
const body = document.body;


// Gespeichertes Theme beim Laden der Seite anwenden
if (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 wiederherstellen
window.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 ändert
function 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 wird
formular.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 localStorage und sessionStorage können wir Daten im Browser speichern
  • localStorage behält Daten dauerhaft, während sessionStorage sie beim Schliessen des Browsers löscht
  • Für komplexe Datenstrukturen wie Objekte und Arrays müssen wir JSON.stringify() und JSON.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.

War diese Seite hilfreich?