localStorage

Dokumentation: https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

Super für Datenschutz: Keine Daten auf dem Server, Benutzer ist selbst verantwortlich.
- Trivial einfach serverseitig: Keine Datenbank o.ä. nötig.
An einen bestimmten Browser und Gerät gebunden. Wechselt man den Browser oder das Gerät, sind die Daten nicht verfügbar.
- Mögliche Abhilfe: «Download» in lokale Datei, danach «Upload» in anderem Browser/Gerät, siehe Daten lokal in eine Seite laden, bzw. davon speichern.

Schreiben Sie eine html-Seite mit folgenden Elementen:

Ein Titel
Ein Eingabefeld um den eigenen Namen einzugeben
Ein Button «Vergiss mich!»

Die Seite soll sich wie folgt verhalten:

Beim ersten mal Laden (oder nach dem «Vergiss mich!») soll der Titel «Hallo Unbekannt!» lauten.
Wenn ein Name eingegeben wurde, soll (auch nach dem Neuladen der Seite) der Titel «Hallo Name» angezeigt werden.
Die Eingabe eines Names überschreibt den alten Namen
Der Vergiss-mich Knopf löscht den Namen aus der localStorage.

Machen Sie eine zweite HTML-Seite, die einfach nur den im localStorage gespeicherten Namen anzeigt und diesen automatisch aktualisiert, wenn auf der ersten Seite der Name geändert wurde.

Siehe auch https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API

Lösungsvorschlag: hello-localstorage.zip

Schreiben Sie eine Highscoreverwaltung.

Zum Testen machen Sie zwei Eingabefelder für das Score und den Namen.

Überlegen Sie sich eine geeignete Datenstruktur (Object, Array) für eine Highscore-Liste. Diese kann mit in einen String und zurück verwandelt werden mit:

let data = {"bla":[1,2,["foo", "bar"]], "blu":"hallo"};
 
// string aus Object/Array erstellen:
let zeichenkette = JSON.stringify(data);
 
// Wieder ein Object/Array aus String erstellen:
let copy = JSON.parse(zeichenkette);