Wie behält eine Web-App Daten auf dem Gerät?
localStorage ist ein Speicher im Browser, in dem eine Web-App kleine Daten als Text auf dem Gerät behält. So bleibt eine Liste nach dem Neuladen und nach einem Neustart des Telefons erhalten.
Wer die Grenzen dieses Speichers kennt, weiß, welche Daten dort sicher sind und welche verloren gehen können, bevor es die Nutzenden bemerken.
Am Ende dieser Lektion
Notiz
Ich kann Daten mit localStorage auf dem Gerät behalten und sagen, welche Grenzen und Verluste es gibt.
Schlüsselwörter
| Begriff | Was er bedeutet |
|---|---|
| localStorage | ein Speicher im Browser aus Schlüsseln und Textwerten, der bleibt |
| sessionStorage | ein ähnlicher Speicher, der mit dem Tab verschwindet |
| Ursprung | die Kombination aus Protokoll, Adresse und Port, englisch origin |
| Kontingent | die Menge Speicher, die ein Ursprung höchstens belegen darf, englisch quota |
| IndexedDB | eine Datenbank im Browser für größere und strukturierte Daten |
| Serialisieren | ein Objekt in Text umwandeln, damit man es speichern kann |
Die Zellen, die Lernende ausfüllen, bleiben in dieser Vorschau leer.
localStorage speichert Schlüssel und Werte als Text
Mit localStorage.setItem("liste", text) legen Sie einen Wert unter einem Schlüssel ab. Mit getItem("liste") lesen Sie ihn, mit removeItem löschen Sie ihn.
Der Speicher kennt nur Text. Eine Liste oder ein Objekt müssen Sie vorher mit JSON.stringify in Text verwandeln und nach dem Lesen mit JSON.parse zurückholen.
Ein Beispiel: eine Liste speichern und lesen
const SCHLUESSEL = "lesezeichen";
const liste = ["Algorithmen kompakt", "Netze verstehen"];
localStorage.setItem(SCHLUESSEL, JSON.stringify(liste));
const gelesen = JSON.parse(localStorage.getItem(SCHLUESSEL) || "[]");
console.log(gelesen.length);Die Liste als Text und zurück
import json
liste = ["Algorithmen kompakt", "Netze verstehen"]
text = json.dumps(liste)
print(text)
print(type(text))
zurueck = json.loads(text)
print(len(zurueck))
# Hängen Sie ein drittes Buch an liste an und starten Sie noch einmal.
Das Lab zeigt, wo die App localStorage benutzt
Die Web-App des Labs behält ihre Liste in localStorage. Der Befehl grep -n sucht eine Zeichenfolge in einer Datei und zeigt die Zeilennummer vor jeder Fundstelle.
Es gibt drei Fundstellen: die Zeilen 1, 3 und 11. Zeile 1 ist ein Kommentar auf Englisch. In Zeile 3 liest die App die Liste, in Zeile 11 schreibt sie.
Die Stellen mit localStorage in der App finden
docker exec jupyter grep -n localStorage app/app.jsHier angezeigt, nicht ausgeführt. Erstellen Sie ein kostenloses Konto, um „Ausführen“ zu drücken und ihn im Terminal Ihres eigenen Labs einzugeben.
Der Speicher hat eine Grenze von wenigen Megabyte
Jeder Ursprung darf nur eine begrenzte Menge ablegen, oft rund fünf Megabyte, je nach Browser. Wird die Grenze erreicht, wirft setItem einen Fehler (QuotaExceededError).
Der Speicher ist außerdem synchron: Ein großer Zugriff hält die Seite an. Für größere Mengen gibt es IndexedDB.
Ein Vergleich: welcher Speicher wofür
| Speicher | Bleibt | Größe | Passt zu |
|---|---|---|---|
| localStorage | ja, bis gelöscht | wenige Megabyte | Einstellungen, kleine Listen |
| sessionStorage | nur bis der Tab zu ist | wenige Megabyte | Entwurf in einem Tab |
| Cookie | bis zum Ablauf | wenige Kilobyte | Anmeldung, geht bei jeder Anfrage mit |
| IndexedDB | ja, bis gelöscht | deutlich größer | viele Datensätze |
| Cache-Speicher | ja, bis gelöscht | deutlich größer | Dateien für den Offline-Betrieb |
Die Zellen, die Lernende ausfüllen, bleiben in dieser Vorschau leer.
Gespeicherte Daten können verloren gehen
Nutzende können die Daten einer Seite löschen. Ein privates Fenster vergisst sie beim Schließen. Ist das Gerät fast voll, darf der Browser Speicher freigeben.
Die Daten gehören außerdem zu genau einem Ursprung und einem Gerät. Ein zweites Telefon sieht sie nicht. Legen Sie wichtige Daten darum zusätzlich auf einem Server ab.
Keine Geheimnisse im Browser-Speicher
Tipp
Jedes Skript der Seite kann localStorage lesen. Speichern Sie darum kein Passwort und keine Zahlungsdaten dort. Eine Liste von Lesezeichen ist dagegen unkritisch.
Ein häufiger Fehler
Warnung
Viele denken, localStorage sei eine Datenbank, die nichts verliert. Es ist ein kleiner Speicher im Browser, den die Nutzenden leeren können. Planen Sie darum so, dass die App auch nach einem Verlust wieder startet.