Speichern im Browser
als Präsentation ▻JavaScript Programme die im Browser laufen haben einen ganz eigenen Lebenszyklus:
In jedem Browserfenster läuft ein anderes Programme, jeweils mit eigenen Variablen. Bei einem “Reload” startet das Programm von Vorne, mit neuen Variablen:
▻localStorage
Um diese Einschränkung zu überwinden gibt localStorage: ein Art
Daten permanent und unabhängig von Browser-Fenstern zu speichern.
localStorage.setItem("name", "she who must not be named");
let n = localStorage.getItem("name");
Aber Achtung: localStorage ist ein key-value store, sowohl keys
als auch values können nur Strings sein!
Zahlen in localStorage speichern
Wenn man Zahlen oder andere Datentypen in localStorage speichern will kann man sie explizit konvertieren:
localStorage.setItem("number", 42);
let n = parseInt( localStorage.getItem("number") );
oder man verwendet JSON dafür:
localStorage.setItem("number", JSON.stringify(42));
let n = JSON.parse( localStorage.getItem("number") );
Storage Event
Wenn in localStorage etwas gespeichert wird löst das ein Storage-Event aus. Auf das kann ich in JavaScript reagieren:
var n; // globale Variable, kann unten gesetzt werden
addEventListener("storage", (event) => {
n = JSON.parse( localStorage.getItem("number") );
});
Anwendungen für localStorage
localStorage ist sehr gut geegiente:
- für Daten einer Person auf einem Gerät
- für Fälle wenn die Seite “offline” verwendet wird
aber es ist nicht geeigent falls:
- Daten zwischen verschiedenen Personen geteilt werden sollen,
- oder zwischen verschiedenen Browsern,
- oder zwischen verschiedenen Geräten
Dafür brauchen wir weiterhin eine Backend mit Datenbank.
▻