====== localStorage ====== * Dokumentation: https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage ===== Quiz ===== Beantworten Sie folgende Fragen mit Hilfe der obigen Dokumentation.

You Scored % - /

===== Vor- und Nachteile ===== * 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 [[.:localdownloadupload|Daten lokal in eine Seite laden, bzw. davon speichern.]] ===== Aufgaben ===== 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: {{lehrkraefte:blc:informatik:ffprg2-2023:hello-localstorage.zip}} ==== Highscoreverwaltung ==== 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);

Stellen Sie die 10 besten Scores in einer Tabelle dar. ==== Todo-Liste ==== Hier finden Sie den Anfang eine ganz einfachen Todo-Liste: {{lehrkraefte:blc:informatik:ffprg2-2023:todo-list-in-localstorage.zip}}. Diese enthält Einträge, die direkt editierbar sind. Alle Änderungen werden sofort in localStorage gespeichert und bleiben so erhalten. Mögliche Erweiterungen: * Möglichkeit, Einträge zu löschen. * Bessere Darstellung (CSS). * Möglichkeit, die Reihenfolge zu ändern. * ...