Datenspeicherung

Aufgabe 1: Zugriffszähler

Implementieren Sie das Beispiel zum Zugriffszähler auf der Grundlage von Cookies aus der Vorlesung. Beim Erstaufruf der zugehörenden Webseite sollte die Meldung Guten Tag! Wir begrüßen Sie als Neukunde! erscheinen. Wenn Sie die Seite dann aktualisieren, erscheint die Meldung Guten Tag! Dies ist Ihr 2. Besuch! Mit jedem Aktualisierungsvorgang wird der Zähler um eins erhöht. Nach Ablauf von 60s ohne Aktualisierung erscheint wieder die Erstbegrüßung. Wenn Sie immer nur die Erstbegrüßung sehen, liegt dies vermutlich daran, dass in Ihrem Browser die Cookies deaktiviert sind. Ändern Sie dann die Einstellungen oder wechseln Sie ggf. den Browser.

Aufgabe 2: Warenkorb

Implementieren Sie eine einfache Warenkorbanwendung auf der Grundlage von Cookies. Im oberen Textfeld kann der Name eines Artikels eingegeben werden. Wird auf Speichern gedrückt, so wird der Artikel im Cookie gespeichert und im darunter befindlichen Textarea der derzeitige Inhalt des Cookies ausgegeben.

Artikel speichern
Abb. 1: Speichern eines neuen Artikels im Warenkorb

Durch Drücken des Buttons Öffnen wird der Warenkorbinhalt im Textarea aufgelistet.

Warenkorbinhalt
Abb. 2: Auflisten des Warenkorbinhalts

Durch Drücken des Buttons Löschen kann der Warenkorbinhalt durch Löschen des Cookies gelöscht werden.

Aufgabe 3: Kundendaten

Implementieren Sie das Beispiel zur Speicherung von Kundendaten mit Local Storage aus der Vorlesung.

Erweitern Sie die Anwendung wie folgt:

  1. Die Besucher werden zunächst über die Datenspeicherabsicht informiert und ihre Zustimmung wird mittels Check Box eingeholt. Erfolgt diese nicht, so werden die eingegebenen Daten nicht verarbeitet. Anstatt dessen wird eine rot hervorgehobene Fehlermeldung angezeigt.

  2. Zusätzlich zum Namen wird noch das Hobby abgefragt und im Local Storage gespeichert.

  3. Bei Eingabe bestimmter Hobbys, wie z. B. Marathon laufen, erscheint eine Werbeeinblendung, wie in Abb. 3 unten, sonst nicht.

  4. Die Anzahl der Besuche wird ebenfalls im Local Storage gespeichert.

  5. Beim Auflisten der gespeicherten Daten wird zusätzlich ein Button für das Löschen der gespeicherten Daten eingeblendet. Wird dieser gedrückt, so werden die Daten im Local Storage gelöscht und eine Bestätigungsmeldung auf der Webseite angezeigt. Beim nächsten Aufruf der Seite erscheint dann wieder die Eingabemaske aus Abb.1.

Formular
Abb. 3: Daten einlesen und speichern
Fehlerfall
Abb. 4: Fehlermeldung beim Versuch, die Daten ohne abgehakte Check Box zu speichern
Erneutes Laden
Abb. 5: Anzeige nach dem Speichern oder beim erneuten Laden der Seite. Es wird zusätzlich die Option, die Daten zu löschen, angeboten
Fehlerfall
Abb. 6: Bestätigungsmeldung nach dem Löschen der Daten

Aufgabe 4: Notizen

Programmieren Sie die in Abb. 4 dargestellte einfache Anwendung zur Speicherung von Notizen mit Hilfe von Local Storage. Die Anwendung besteht lediglich aus einem <textarea>-Element sowie einer Funktion, die regelmäßig, z. B. jede Sekunde, von einem Timer aufgerufen wird und den Inhalt des Textareas im Local Storage speichert.

Fehlerfall
Abb. 7: Einfache Anwendung für Notizen

Testen Sie Ihre Anwendung dahingehend, ob nach dem Neustart des Browsers alle zuvor im Textarea eingegebenen Inhalte wiederhergestellt werden.