HTML Web Storage
Zuvor war canvas eine leere Bitmap, die JavaScript bemalte. Diese Lektion verlässt das Zeichnen und stellt Web Storage vor: kleine Schlüssel/Wert-Zeichenketten im Browser mit localStorage und sessionStorage. HTML lädt weiterhin ein Skript; das Skript ruft Storage-APIs auf. Praxis-Fokus — Speichern/Lesen und Lebensdauer — kein Cookie-, IndexedDB- oder Server-DB-Kurs.
Warum web storage in einem HTML-Kurs
Anfänger wollen, dass Theme oder Name einen Reload überlebt. Web Storage ist das erste übliche Werkzeug. Nach canvas ist die Trennung anders: HTML besitzt die Hülle; JS das Merken von Strings für die Origin. Es reichen setItem, getItem und local vs. session.
Direkte Antwort
1) localStorage.setItem speichert einen String. 2) getItem liest ihn. 3) localStorage bis zum Löschen. 4) sessionStorage für Tab/Sitzung. 5) Kein HTML-Tag ersetzt die APIs. 6) Nur leichte Präferenzen; Objekte brauchen JSON, weil Werte Strings sind.
📊 localStorage vs sessionStorage
| Topic | localStorage | sessionStorage |
|---|---|---|
| Typical lifetime | Until cleared by user/site/code | Until the tab/session ends |
| Survives browser restart | Usually yes (same origin) | No |
| Shared across tabs (same origin) | Yes (same storage) | No (per tab/session) |
| API shape | setItem / getItem / removeItem | Same method names |
| Beginner fit | Theme, language preference | One-tab wizard draft, temp flags |
| This course depth | Intro save/read only | Intro save/read only |
Winziges localStorage-Demo
Ein Klick speichert eine Begrüßung und zeigt sie in einem Absatz. Nach Reload findet getItem den Wert für die Origin — die „local“-Idee.
<button id="save" type="button">Remember hi</button>
<p id="out"></p>
<script>
const out = document.getElementById("out");
const saved = localStorage.getItem("greet");
if (saved) {
out.textContent = "Saved: " + saved;
}
document.getElementById("save").onclick = function () {
localStorage.setItem("greet", "hi");
out.textContent = "Saved: " + localStorage.getItem("greet");
};
</script>
Die localStorage-Aufrufe lesen
- localStorage ist ein Browser-Objekt für Seitenskripte
- setItem speichert den String unter einem Schlüssel
- getItem liest ihn (oder null)
- Anzeige in p beweist Persistenz ohne Zeichnen (anders als canvas)
- Schlüssel und Werte sind Strings
- Löschen: removeItem oder DevTools
sessionStorage für Tab-Daten
Gleiche Methodennamen, kürzere Lebensdauer. Nützlich für einen Ein-Tab-Entwurf, der mit dem Tab verschwindet.
<label for="note">Tab-only note</label>
<input id="note" type="text" />
<button id="keep" type="button">Keep in this tab</button>
<p id="shown"></p>
<script>
const input = document.getElementById("note");
const shown = document.getElementById("shown");
const prior = sessionStorage.getItem("note");
if (prior) {
input.value = prior;
shown.textContent = "Restored in this tab: " + prior;
}
document.getElementById("keep").onclick = function () {
sessionStorage.setItem("note", input.value);
shown.textContent = "Kept: " + sessionStorage.getItem("note");
};
</script>
Die sessionStorage-Idee lesen
- Gleiches setItem/getItem-Muster
- Nach Reload im selben Tab wiederhergestellt
- Anderer Tab sieht die Daten typisch nicht
- Weiterhin Strings; keine Passwörter
- local vs. session nach Lebensdauer wählen
- Als Nächstes: geolocation
Was speichern
- Theme/Sprache: localStorage
- Wizard-Flag nur dieser Tab: sessionStorage
- Geheimnisse: keines von beiden
- Große Dateien: jenseits dieses Intros
- Server-Konten: Backend
- Pixel zeichnen: war canvas
Übung — Präferenz merken
- localStorage-Demo einfügen und speichern.
- Neu laden; Wiederherstellung prüfen.
- sessionStorage im selben Tab testen.
- Tab schließen und erneut öffnen.
- Zahl speichern — kommt als String zurück.
- Satz: canvas malt Pixel; Web Storage speichert Strings.
- Ausblick: geolocation.
Typische Fehler
- Storage-Tag erwarten
- Passwörter speichern
- Strings vergessen (JSON für Objekte)
- Mit canvas oder Cookies verwechseln
- sessionStorage für ewig halten
- Andere Geräte teilen annehmen
- Intro als vollen DB-Kurs nehmen
Zusammenfassung
- Web Storage ist eine JS-API: localStorage und sessionStorage
- setItem/getItem speichern Strings für Ihre Origin
- local bis gelöscht; session für Tab/Sitzung
- Für leichte Präferenzen — nicht für Geheimnisse
- Canvas war Pixel; diese Lektion gemerkte Strings
- Als Nächstes: HTML geolocation
🧠 Testen Sie Ihr Wissen
Testen Sie Ihr Wissen
Fordern Sie sich mit diesem interaktiven Quiz heraus und sehen Sie, wie gut Sie das Thema verstehen
📝 Anweisungen
- Lesen Sie jede Frage sorgfältig
- Wählen Sie die beste Antwort für jede Frage
- Sie können das Quiz so oft wiederholen, wie Sie möchten
- Ihr Fortschritt wird oben angezeigt