Web Engineering 1/Persistenz

Wiki-Quelltext dieser Seite.

{{Ziele|
* Serverseitig meist klassische DBMS (MySQL, MongoDB)
* Clientseitige Speicherung ist durch den Browser beschränkt
** Cookies: max 4 kByte (Name-Wert Zeichenkette)
** WebStorage: max 5 MByte (Name-Wert Objekte)
** IndexedDB: unbeschränkt (NoSQL, indiziert, Objekt-basiert)
|
* Lesen und schreiben von Cookies
* Umgang mit dem WebStorage Speicher
* Verwendung von Transaktionen mit IndexedDB 
|
* Der Name des zuletzt angemeldeten Benutzers wird beim Start der WebApp angezeigt
* Der aktuelle Zustand des Sudoku (inklusive Zeit) wird mittels WebStorage gespeichert und beim Start der WebApp wiederhergestellt
}}

==Cookies==
{|
|style="width: 22em;vertical-align:top;"|<html>
<iframe width="380" height="200" src="//jsfiddle.net/pw_we1/yzLeck32/embedded/js,html,result/" frameborder="0"></iframe>
</html>
|style="vertical-align:top;padding-left:1em;"|
* ''Probieren Sie das Beispiel aus und erklären Sie warum Ihr Wert nicht der einzige im Cookie ist''
* ''Bearbeiten Sie den Code und speichern Sie die Werte unter einem anderen Schlüssel''
* ''Schließen Sie die Webseite und bearbeiten Sie das Beispiel erneut, erklären Sie die jetzigen Inhalte des Cookies''
* ''Parsen Sie den Cookie-Inhalt, sodass nur der Cookie-Wert des eigenen Schlüssels angezeigt wird''
* ''Recherchieren Sie wie die Gültigkeit eines Cookie-Wertes festgelegt wird''
* ''Legen Sie für Ihren Cookie-Wert eine kurze Gültigkeitsdauer fest und beobachten Sie was nach Ablauf passiert''
|}

==WebStorage==
{|
|style="width: 22em;vertical-align:top;"|<html>
<iframe width="420" height="290" src="//jsfiddle.net/pw_we1/mz7tqfb0/embedded/js,html,result/" frameborder="0"></iframe>
</html>
|style="vertical-align:top;padding-left:1em;"|
* ''Probieren Sie das Beispiel aus und weisen Sie nach, dass der gespeicherte Wert auch über die Laufzeit des Browsers hinaus erhalten bleibt''
* ''Fügen Sie Fehlerbehandlungen beim Öffnen, Lesen und Schreiben hinzu''
* ''Recherchieren Sie eine alternative Syntax zum Schreiben und Lesen von Werten im Webstorage Objekt''
* ''Ändern Sie das Beispiel, sodass anstelle einer Zeichenkette ein Objekt mit einem zusätzlichen Zeitstempel gespeichert und ausgegeben wird''
* ''Öffnen Sie das Beispiel in einem neuen Tab und untersuchen Sie die Erreichbarkeit der gespeicherten Werte''
* ''Informieren Sie sich zu <tt>sessionStorage</tt> und stellen Sie das Beispiel entsprechend um''
* ''Wiederholen Sie den Erreichbarkeitstest, was stellen Sie fest?''
|}

==IndexedDB==
{|
|style="width: 22em;vertical-align:top;"| <html>
<iframe width="460" height="350" src="//jsfiddle.net/pw_we1/vms9g9un/embedded/js,html,css,result/" frameborder="0"></iframe>
</html>
|style="vertical-align:top;padding-left:1em;"|
* ''Probieren Sie das Beispiel aus, erklären Sie die asynchronen Abläufe und recherchieren Sie die Bedeutung von Transaktionen''
* ''Modifizieren Sie das Beispiel, sodass bestehende Datensätze geändert werden können''
* ''Ergänzen Sie eine Funktion zum Abruf eines gespeicherten Objekts mit einer bestimmten <tt>id</tt>''
* ''Fügen Sie eine Funktion hinzu um ein gespeichertes Objekt zu löschen''
* ''Ergänzen Sie eine Funktion zum Abruf von gespeicherten Objekten mit einem bestimmten <tt>name</tt>''
* ''Fügen Sie einen Index für <tt>name</tt> hinzu. Nutzen Sie dabei die verfügbaren Mittel für Versionierung und Upgrade''
* ''Modifizieren Sie Ihre Funktion zur Selektion bestimmter Namen, sodass diese den Index benutzt. Welche Vorteile bringt diese Technik?''
|}

{{Projekt|Beispiellösung <document>WE1-P10.zip</document>}}