Buchungen merken

Buche ein paar Plätze und klicke auf Ausführen. Die Plätze sind wieder frei, als wäre nichts passiert: Die Buchungen standen nur in der Variablen buchungen, und bei jedem Ausführen beginnt das Skript von vorn, genau wie wenn ein Besucher die Seite erneut öffnet.

Ein echtes Kino speichert seine Buchungen auf seinem Server, wo die Buchungen aller Besucher zusammenkommen: Ein Platz, den ein Besucher gebucht hat, ist für alle anderen belegt. Dafür braucht es ein Programm, das auf dem Server läuft, und das ist ein Thema für sich. Deine Seite speichert die Buchungen im Browser, im localStorage, wie in der Lektion Daten von einem Server. Der Besucher findet dann seine Buchungen wieder, wenn er zurückkommt.

Du weißt, wie das geht: Speichere das Array nach jeder Änderung mit JSON.stringify() als JSON-Text, und lies es beim Öffnen der Seite mit JSON.parse() wieder ein, wenn etwas gespeichert ist:

let buchungen = [];

const gespeicherteBuchungen = localStorage.getItem("buchungen");
if (gespeicherteBuchungen !== null) {
    buchungen = JSON.parse(gespeicherteBuchungen);
}

zeigePlaetze() sucht belegte Plätze schon in buchungen, die gespeicherten Buchungen erscheinen also als belegte Plätze, sobald sie geladen sind. In der Vorschau löscht der Button Gespeicherte Daten löschen der Konsole sie, und die Plätze sind wieder frei.

Typische Fehler:

• Das Array speichern, bevor die neue Buchung hinzugefügt wurde. Nach dem Neuladen fehlt die neueste Buchung.
• Das Array ohne JSON.stringify() speichern. Es wird als Text wie [object Object] gespeichert, und beim erneuten Öffnen der Seite endet JSON.parse() mit einem SyntaxError.