Kapitel 18: Lokaler Speicher (Datenerhaltung)

Der lokale Speicher erlaubt Ihnen, Daten im Browser zu speichern, die auch nach dem Schliesen der Seite erhalten bleiben. In diesem Kapitel lernen Sie localStorage und sessionStorage.

18.1 localStorage - Dauerhafter Speicher

localStorage speichert Daten ohne Ablaufdatum.

Grundlegende Verwendung

// Speichern
localStorage.setItem("name", "Max");

// Abrufen
let name = localStorage.getItem("name");
console.log(name);  // "Max"

// Löschen
localStorage.removeItem("name");

// AlLes löschen
localStorage.clear();

Praxis-Beispiel: Benutzernamen speichern

<input type="text" id="nameInput" placeholder="Namen eingeben...">
<button id="speichernBtn">Speichern</button>
<button id="abrufenBtn">Abrufen</button>
<button id="loeschenBtn">Löschen</button>
<p id="anzeige"></p>

<script>
    let nameInput = document.getElementById("nameInput");
    let anzeige = document.getElementById("anzeige");

    // Speichern
    document.getElementById("speichernBtn").addEventListener("click", function() {
        if (nameInput.value.trim() === "") {
            alert("Bitte geben Sie einen Namen ein!");
            return;
        }
        localStorage.setItem("benutzerName", nameInput.value);
        alert("Name gespeichert!");
        nameInput.value = "";
    });

    // Abrufen
    document.getElementById("abrufenBtn").addEventListener("click", function() {
        let name = localStorage.getItem("benutzerName");
        if (name) {
            anzeige.textContent = "Ihr Name: " + name;
        } else {
            anzeige.textContent = "Kein Name gespeichert.";
        }
    });

    // Löschen
    document.getElementById("loeschenBtn").addEventListener("click", function() {
        localStorage.removeItem("benutzerName");
        anzeige.textContent = "";
        alert("Name gelöscht!");
    });

    // Beim Laden prüfen, ob Name vorhanden ist
    window.addEventListener("load", function() {
        let name = localStorage.getItem("benutzerName");
        if (name) {
            anzeige.textContent = "Willkommen zurück, " + name + "!";
        }
    });
</script>

18.2 sessionStorage - Temporärer Speicher

sessionStorage speichert Daten nur für die aktuelle Sitzung (Tab wird geschlossen → Daten weg).

Unterschied: localStorage vs sessionStorage

Eigenschaft	localStorage	sessionStorage
Gültigkeitsdauer	Unbegrenzt	Nur für aktuelle Sitzung
Tab schliesen	Daten bleiben	Daten gelöscht
Browser schliesen	Daten bleiben	Daten gelöscht
Anwendungsfall	Benutzereinstellungen	Temporäre Daten

Grundlegende Verwendung

// Genau wie localStorage, nur mit sessionStorage
sessionStorage.setItem("tempData", "Ich bin temporär!");
let data = sessionStorage.getItem("tempData");
console.log(data);  // "Ich bin temporär!"

// Tab schliesen → Daten weg!

Praxis-Beispiel: Temporäre Eingabe speichern

<textarea id="notiz" placeholder="Notiz eingeben..."></textarea>
<p id="status"></p>

<script>
    let notizText = document.getElementById("notiz");
    let status = document.getElementById("status");

    // Beim Laden: Notiz aus sessionStorage abrufen
    let gespeicherteNotiz = sessionStorage.getItem("notiz");
    if (gespeicherteNotiz) {
        notizText.value = gespeicherteNotiz;
        status.textContent = "Notiz aus dem Speicher geladen.";
    }

    // Bei Eingabe: Notiz in sessionStorage speichern
    notizText.addEventListener("keyup", function() {
        sessionStorage.setItem("notiz", notizText.value);
        status.textContent = "Notiz temporär gespeichert...";
    });

    // Hinweis für Benutzer
    console.log("Hinweis: Notiz wird nur für diesen Tab gespeichert. Beim Schliesen des Tabs gehen die Daten verloren!");
</script>

18.3 Daten speichern/abrufen/löschen

JSON-Daten speichern (Objekte/Arrays)

localStorage speichert nur Strings! Um Objekte/Arrays zu speichern, müssen wir JSON.stringify() verwenden.

Speichern (Stringify)

let benutzer = {
    name: "Max",
    alter: 25,
    email: "max@example.com"
};

// Objekt in String umwandeln
let benutzerString = JSON.stringify(benutzer);
localStorage.setItem("benutzer", benutzerString);

Abrufen (Parse)

// String abrufen
let benutzerString = localStorage.getItem("benutzer");

// String in Objekt umwandeln
let benutzerObjekt = JSON.parse(benutzerString);
console.log(benutzerObjekt.name);  // "Max"
console.log(benutzerObjekt.alter); // 25

Komplexes Beispiel: Einkaufswagen speichern

// Einkaufswagen-Array
let warenkorb = [
    { name: "Laptop", preis: 999.99, anzahl: 1 },
    { name: "Maus", preis: 19.99, anzahl: 2 }
];

// Speichern
localStorage.setItem("warenkorb", JSON.stringify(warenkorb));

// Abrufen
let gespeicherterWarenkorb = JSON.parse(localStorage.getItem("warenkorb"));
console.log(gespeicherterWarenkorb[0].name);  // "Laptop"

// Neuen Artikel hinzufügen
gespeicherterWarenkorb.push({ name: "Tastatur", preis: 49.99, anzahl: 1 });
localStorage.setItem("warenkorb", JSON.stringify(gespeicherterWarenkorb));

18.4 Praxis: Benutzernamen merken / Einkaufswagen-Daten

Projekt 1: Benutzernamen merken (Mit "Angemeldet bleiben"-Option)

<form id="loginForm">
    <div>
        <label>Name:</label>
        <input type="text" id="name" required>
    </div>
    <div>
        <label>E-Mail:</label>
        <input type="email" id="email" required>
    </div>
    <div>
        <input type="checkbox" id="angemeldetBleiben">
        <label>Angemeldet bleiben</label>
    </div>
    <button type="submit">Anmelden</button>
</form>
<p id="begruessung"></p>

<script>
    let loginForm = document.getElementById("loginForm");
    let begruessung = document.getElementById("begruessung");

    // Beim Laden prüfen, ob Benutzer gespeichert ist
    window.addEventListener("load", function() {
        let gespeicherterName = localStorage.getItem("benutzerName");
        if (gespeicherterName) {
            begruessung.textContent = "Willkommen zurück, " + gespeicherterName + "!";
            loginForm.style.display = "none";
        }
    });

    // Formular absenden
    loginForm.addEventListener("submit", function(event) {
        event.preventDefault();

        let name = document.getElementById("name").value;
        let angemeldetBleiben = document.getElementById("angemeldetBleiben").checked;

        // Wenn "Angemeldet bleiben" aktiviert
        if (angemeldetBleiben) {
            localStorage.setItem("benutzerName", name);
        } else {
            // Nur für diese Sitzung speichern
            sessionStorage.setItem("benutzerName", name);
        }

        begruessung.textContent = "Willkommen, " + name + "!";
        loginForm.style.display = "none";
    });
</script>

Projekt 2: Einkaufswagen mit localStorage

<div>
    <h3>Produkte</h3>
    <button onclick="wareHinzufuegen('Laptop', 999.99)">Laptop hinzufügen</button>
    <button onclick="wareHinzufuegen('Maus', 19.99)">Maus hinzufügen</button>
</div>
<h3>Warenkorb</h3>
<ul id="warenkorbListe"></ul>
<p>Gesamtpreis: <span id="gesamtpreis">0</span> €</p>
<button onclick="warenkorbLeeren()">Warenkorb leeren</button>

<script>
    // Beim Laden: Warenkorb aus localStorage abrufen
    let warenkorb = JSON.parse(localStorage.getItem("warenkorb")) || [];

    // Funktion: Ware hinzufügen
    function wareHinzufuegen(name, preis) {
        warenkorb.push({ name: name, preis: preis });
        localStorage.setItem("warenkorb", JSON.stringify(warenkorb));
        warenkorbAnzeigen();
    }

    // Funktion: Ware entfernen
    function wareEntfernen(index) {
        warenkorb.splice(index, 1);
        localStorage.setItem("warenkorb", JSON.stringify(warenkorb));
        warenkorbAnzeigen();
    }

    // Funktion: Warenkorb leeren
    function warenkorbLeeren() {
        warenkorb = [];
        localStorage.removeItem("warenkorb");
        warenkorbAnzeigen();
    }

    // Funktion: Warenkorb anzeigen
    function warenkorbAnzeigen() {
        let liste = document.getElementById("warenkorbListe");
        let gesamtpreisElement = document.getElementById("gesamtpreis");

        liste.innerHTML = "";
        let gesamtpreis = 0;

        warenkorb.forEach(function(ware, index) {
            let li = document.createElement("li");
            li.textContent = ware.name + " - " + ware.preis + " € ";
            
            let entfernenBtn = document.createElement("button");
            entfernenBtn.textContent = "Entfernen";
            entfernenBtn.onclick = function() {
                wareEntfernen(index);
            };

            li.appendChild(entfernenBtn);
            liste.appendChild(li);

            gesamtpreis += ware.preis;
        });

        gesamtpreisElement.textContent = gesamtpreis.toFixed(2);
    }

    // Beim Laden anzeigen
    warenkorbAnzeigen();
</script>

📝 Zusammenfassung

In diesem Kapitel haben Sie gelernt:

• ✅ localStorage - Dauerhafter Speicher (ohne Ablaufdatum)
• ✅ sessionStorage - Temporärer Speicher (nur für aktuelle Sitzung)
• ✅ Daten speichern: setItem()
• ✅ Daten abrufen: getItem()
• ✅ Daten löschen: removeItem() / clear()
• ✅ JSON-Daten speichern: JSON.stringify() und JSON.parse()
• ✅ Praxis-Projekte: Benutzernamen merken, Einkaufswagen

➡️ Nächster Schritt

Im nächsten Kapitel lernen wir Fehlerbehandlung - wie man Fehler vermeidet und abfängt!

---

Übung:

1. Erstellen Sie ein Formular, das den Benutzernamen speichert
2. Verwenden Sie localStorage, um den Namen dauerhaft zu speichern
3. Beim Laden der Seite: Prüfen Sie, ob ein Name gespeichert ist
4. Erstellen Sie einen "Abmelden"-Button, der den Speicher löscht
5. Testen Sie alles im Browser (DevTools → Application → Local Storage)