lehrkraefte:blc:informatik:ffprg2-2023:localstorage [https://fginfo.ksbg.ch Fachgruppe Informatik der KSBG]

This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.
====== localStorage ======
  * Dokumentation: https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

===== Quiz =====
Beantworten Sie folgende Fragen mit Hilfe der obigen Dokumentation.

<HTML>
<div id="localStorageQuiz">
  <div class="quizlib-card quizlib-question">
    <div class="quizlib-question-title">
    Welche der folgenden Seiten hätte Zugriff auf die gleiche localStorage wie <br><b>https://ofi.tech-lab.ch/2023/teach/847191/bla.php?x=7&y=12</b>
    </div>
    <div class="quizlib-question-answers">
      <ul>
        <li><label><input type="checkbox" name="q3" value="a">
          https://ofi.tech-lab.ch/2023/teach/847191/bla.php?x=8&y=11
        </label></li>
        <li><label><input type="checkbox" name="q3" value="b">
          https://ofi.tech-lab.ch/2023/teach/847191/blu.html
        </label></li>
        <li><label><input type="checkbox" name="q3" value="c">
          http://ofi.tech-lab.ch/2023/teach/847191/blu.html
        </label></li>
        <li><label><input type="checkbox" name="q3" value="d">
          https://ofi.tech-lab.ch/2023/2hW/13371337/test.html
        </label></li>
        <li><label><input type="checkbox" name="q3" value="e">
          https://ofi.tech-lab.ch/
        </label></li>
        <li><label><input type="checkbox" name="q3" value="f">
          https://hanswurst@ofi.tech-lab.ch/
        </label></li>
        <li><label><input type="checkbox" name="q3" value="g">
          https://ofi.tech-lab.ch:443/
        </label></li>
        <li><label><input type="checkbox" name="q3" value="h">
          https://ofi.tech-lab.ch:8080/
        </label></li>
        <li><label><input type="checkbox" name="q3" value="i">
          https://www.tech-lab.ch
        </label></li>
        <li><label><input type="checkbox" name="q3" value="j">
          https://www.ksbg.ch
        </label></li>
      </ul>
    </div>
  </div>
  
  <div class="quizlib-card quizlib-question">
    <div class="quizlib-question-title">
    Wo genau werden die Daten des localStorage gespeichert?
    </div>
    <div class="quizlib-question-answers">
      <ul>
        <li><label><input type="radio" name="q7" value="a">
          Auf dem Webserver (Daten werden mit der HTML-Seite ausgeliefert)
        </label></li>
        <li><label><input type="radio" name="q7" value="b">
          Lokal auf dem Gerät des Benutzers im «Dokumente»-Verzeichnis.
        </label></li>
        <li><label><input type="radio" name="q7" value="c">
          Lokal auf dem Gerät des Benutzers im den Arbeitsdateien des verwendeten Browsers (wo z.B. auch Bookmarks (Favoriten), Browserhistory, Einstellungen etc. gespeichert werden).
        </label></li>
      </ul>
    </div>
  </div>
  
  <div class="quizlib-card quizlib-question">
    <div class="quizlib-question-title">
      Wie genau werden Daten im localStorage gespeichert?
    </div>
    <div class="quizlib-question-answers">
      <ul>
        <li><label><input type="radio" name="q11" value="a">
          Es wird einfach ein einziger String gespeichert. Die Webseite ist für dessen Interpretation zuständig.
        </label></li>
        <li><label><input type="radio" name="q11" value="b">
          Mit Schlüsseln (Strings) können nur Strings direkt gespeichert werden.
        </label></li>
        <li><label><input type="radio" name="q11" value="c">
          Es kann ein beliebiges JavaScript Objekt gespeichert werden.
        </label></li>
        <li><label><input type="radio" name="q11" value="d">
          Mit Schlüsseln (Strings) können beliebige JavaScript Objekte gespeichert werden.
        </label></li>
      </ul>
    </div>
  </div>

  <div class="quizlib-card quizlib-question">
    <div class="quizlib-question-title">
      Welche URL hat eventuell keinen Zugriff auf localStorage?
    </div>
    <div class="quizlib-question-answers">
      <ul>
        <li><label><input type="radio" name="q1" value="a">
          http://unsicher.com/bla.html
        </label></li>
        <li><label><input type="radio" name="q1" value="b">
          file:///c/users/hanswurst/documents/test.html
        </label></li>
        <li><label><input type="radio" name="q1" value="c">
          https://localhost:8080/test.html
        </label></li>
        
      </ul>
    </div>
  </div>
  
  <button class="quizlib-submit" type="button" onclick="quizlibShowResults('localStorageQuiz',[['a','b','d', 'e', 'f', 'g'], ['c'], ['b'], ['b']]);">Check Answers</button>
</div>

<div id="quizlib-result" class="quizlib-card">
    You Scored <span id="quiz-percent"></span>% - <span id="quiz-score"></span>/<span id="quiz-max-score"></span><br/>
</div>
</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>
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.

</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.

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 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:
<code javascript>
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);
</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>