lehrkraefte:blc:informatik:ffprg2-2023:localstorage

Differences

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

Link to this comparison view

Next revision		 Previous revision
lehrkraefte:blc:informatik:ffprg2-2023:localstorage [2023/08/14 05:40] – created Ivo Blöchligerlehrkraefte:blc:informatik:ffprg2-2023:localstorage [2023/09/03 05:04] (current) – [Aufgaben] Ivo Blöchliger
Line 1: Line 1:
 +====== 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>