Speichern im Browser

▻

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:

Demo

▻

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.

▻

Siehe Auch

• MDN: localStorage