Web Storage
Nach dem Schließen des Browsers liegt localStorage noch da. Die sichtbare Zeile lautet saved / lida / tea. Der Browser hält dafür eine kurze Notiz, und zwar nur für diese Website. Abgelegt sind der Gast lida und das Getränk tea.
Nicht die Musterseite
An jede Anfrage, die der Browser schickt, hängt dieser Speicher nicht. Cookies gehören auf eine spätere Seite. Die Musterseite endete bei true / Order: mint. Fehlt ein Schlüssel, wirft getItem nichts und liefert null.
Immer Zeichen, nie eine nackte Zahl
Eine Zahl liegt danach als Text. Unter einem Schlüssel schreibt setItem, getItem holt ihn zurück.
localStorage.setItem("drink", "tea");
console.log(localStorage.getItem("drink"));
console.log(localStorage.getItem("size"));
setItem("count", 2) legt die Zeichen 2 ab, nicht die Zahl. Nach einem Neuladen bleibt getItem("drink") bei tea. Die Konsole zeigt zuerst tea und danach null, weil size nie geschrieben wurde.
Ein Objekt muss als Text reisen
Ein schlichtes Objekt wird bei setItem zum Text [object Object]. JSON.stringify baut Text, den man ablegen kann, und JSON.parse setzt das Objekt wieder zusammen. JSON.parse(null) wirft: erst lesen, und die Umwandlung auslassen, sobald null dasteht.
const order = { guest: "lida", drink: "tea" };
localStorage.setItem("w3-order", JSON.stringify(order));
const raw = localStorage.getItem("w3-order");
const back = JSON.parse(raw);
console.log(back.guest + " / " + back.drink);
Jede Seite desselben Ursprungs darf den Schlüssel lesen. Unter w3-order liegt Text, nach dem Parsen ist wieder ein Objekt da. Die Konsole zeigt lida / tea.
Tab oder Browser
sessionStorage kennt dieselben drei Methoden: setItem, getItem und removeItem. Es lebt, bis jener Tab zu ist. localStorage wartet noch, wenn der Browser neu aufgeht. removeItem nimmt einen Schlüssel weg. clear leert jeden Schlüssel dieses Ursprungs, also nicht zum Aufräumen einer einzelnen Bestellung.
sessionStorage.setItem("drink", "mint");
console.log(sessionStorage.getItem("drink"));
sessionStorage.removeItem("drink");
console.log(sessionStorage.getItem("drink"));
Nur die Sitzungsnotiz fällt, wenn der Tab zugeht. w3-order aus localStorage steht in beiden Tabs. Ein zweiter Tab sieht jenen sessionStorage-Schlüssel nicht. Die Konsole zeigt mint und dann null.
Eine Kiste für den Ursprung
Schema, Host und Port teilen sich die Kiste. Sie gehört nicht zu einer einzelnen Datei. Was die Startseite setzt, sieht die Bestellseite derselben Website. Eine fremde Website liest es nicht.
Gast und Getränk auf der Seite
Die Seite schreibt die Bestellung, liest sie zurück und zeigt Gast und Getränk.
<!DOCTYPE html>
<html>
<body>
<p id="line">…</p>
<script>
const order = { guest: "lida", drink: "tea" };
localStorage.setItem("w3-order", JSON.stringify(order));
const back = JSON.parse(localStorage.getItem("w3-order"));
document.querySelector("#line").textContent =
"saved / " + back.guest + " / " + back.drink;
</script>
</body>
</html>
true / Order: mint gehörte zur Musterseite. Nach dem Neuladen holt localStorage dieselben Wörter zurück. In der Zeile steht saved / lida / tea.
Fünf kurze Griffe
- drink per setItem auf tea setzen. getItem gibt tea.
- size per getItem lesen. Ergebnis null.
- Die Bestellung mit JSON.stringify sichern. Nach JSON.parse lautet die Konsole lida / tea.
- mint in sessionStorage legen, dann removeItem. getItem gibt null.
- Die Seite lesen. Die Zeile ist saved / lida / tea.
Wo man danebenliegt
Gespeichert werden Zeichenketten, keine lebenden Objekte. clear meint den ganzen Ursprung, nicht einen Schlüssel.
- Ein Objekt an setItem geben und später [object Object] lesen
- JSON.parse auf null aufrufen
- sessionStorage in einem neuen Tab erwarten
- clear aufrufen und jeden Schlüssel löschen
- die Zeile als true / Order: mint lesen
Mitnehmen
- setItem und getItem legen Zeichenketten ab und lesen sie
- ein fehlender Schlüssel ist null
- Objekte gehen mit JSON.stringify hinein und mit JSON.parse heraus
- localStorage übersteht einen Neustart
- sessionStorage endet mit dem Tab
- die Seitenzeile ist saved / lida / tea
🧠 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