Differences

This shows you the differences between two versions of the page.

--- lehrkraefte:blc:informatik:ffprg2-2023:localstorage [2023/08/14 08:29]
Ivo Blöchliger
+++ lehrkraefte:blc:informatik:ffprg2-2023:localstorage [2023/09/03 07:04] (current)
Ivo Blöchliger [Aufgaben]
@@ Line 90: / Line 90: @@
   <div class="quizlib-card quizlib-question">
     <div class="quizlib-question-title">
-      Welche URL hat keinen Zugriff auf localStorage?
+      Welche URL hat eventuell keinen Zugriff auf localStorage?
     </div>
     <div class="quizlib-question-answers">
@@ Line 116: / Line 116: @@
 </HTML>
+===== 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 =====
 <WRAP todo>
@@ Line 127: / Line 133: @@
   * Die Eingabe eines Names überschreibt den alten Namen
   * Der Vergiss-mich Knopf löscht den Namen aus der localStorage.
 </WRAP>
 <WRAP todo>
-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.
+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}}
 </WRAP>
+==== Highscoreverwaltung ====
 <WRAP todo>
-Schreiben Sie eine Highscore-Verwaltung.
+Schreiben Sie eine Highscoreverwaltung.
 Zum Testen machen Sie zwei Eingabefelder für das Score und den Namen.
@@ Line 142: / Line 153: @@
 Ü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:
 <code javascript>
-  let data = {"bla":[1,2,["foo", "bar"]], "blu":"hallo"};
+let data = {"bla":[1,2,["foo", "bar"]], "blu":"hallo"};
-  // string aus Object/Array erstellen:
+// string aus Object/Array erstellen:
-  let zeichenkette = JSON.stringify(data);
+let zeichenkette = JSON.stringify(data);
-  // Wieder ein Object/Array aus String erstellen:
+// Wieder ein Object/Array aus String erstellen:
-  let copy = JSON.parse(zeichenkette);
+let copy = JSON.parse(zeichenkette);
 </code>
 Stellen Sie die 10 besten Scores in einer Tabelle dar.
+</WRAP>
+==== Todo-Liste ====
+<WRAP todo>
+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.
+  * ...
 </WRAP>