7. Persistenz, Autorisierung, Cookies

7.1 localStorage und sessionStorage

Wenn eine Html-Seite geladen wird, wird auch der in <script>-Tags enthaltene Javascript-Code ausgeführt. Dieser startet im Prinzip immer von einem Anfangszustand. Wenn Sie also eine Variable

let username;

haben, die dann später initialisiert wird, so wird die beim Neuladen der Seite wieder auf undefined zurückgesetzt. Wenn Sie wollen, dass gewisse Werte (User-Einstellungen etc.) es "überleben", wenn die Seite neugeladen wird, der Browser oder der Rechner neugestartet wird, dann helfen Ihnen sessionStorage und localStorage.

Laden Sie sich hier meinen Server für interaktives Zeichnen runter: server.js und index.html.

Übungsaufgabe Zeichnen Sie etwas. Ändern Sie den Radius, die Farbe, und zeichnen Sie sowohl Kreise als auch Quadrate. Dann schließen Sie das Tab, öffnen es erneut und zeichnen weiter. Was hat sich die Anwendung gemerkt und was hat sie vergessen?

Die Anwendung hat sich das Bild gemerkt, also die Menge aller graphischen Objekte (inklusive deren Farbe etc.). Dies ist nicht erstaunlich, denn schließlich sind die alle serverseitig gespeichert. Die Nutzer-Präferenzen wie fill color oder circle radius sind jedoch rein browser-seitig und werden, wenn man das Tab schließt und wieder öffnet (oder einfach die Seite neulädt), wieder auf ihre default-Werte zurückgesetzt. Das wollen wir nicht unbedingt. Manche Dinge sollen persistent sein.

Übung Diskutieren Sie, wie wir persistentes Verhalten mit den bisher gelernten Werkzeugen, also ohne localStorage oder Cookies erreichen können.

Wir wollen jetzt der obigen Anwendung persistentes Verhalten geben. So soll sie sich zum Beispiel "merken", was meine zuletzt ausgesuchten Farben waren, die Größe der Kreise, ob Kreise oder Quadrate etc. Diese Information soll ein Schließen des Tabs oder des Browsers überleben. Hierzu gibt es im Browser-Javascript die globale Variable localStorage, die sich wie ein normales Javascript-Dictionary verhält. Sie können also mit 

                            localStorage.mein_spitzname = 'DOM1N1K 5CH3D3R';
beliebige Variablen definieren.

Übungsaufgabe Experimentieren Sie:
  1. Gehen Sie auf web1.hszg.de und öffnen Sie die Javascript-Konsole.
  2. Tippen Sie localStorage und drücken ENTER, um sich den Inhalt dieser Variable anzeigen zu lassen.
  3. Setzen Sie eine Variable, die bisher noch nicht definiert war, beispielsweise localStorage.username = 'xby25f';.
  4. Schließen Sie das Tab. Öffnen Sie ein neues, gehen wieder auf web1.hszg.de und schauen, ob die von Ihnen gesetzte Variable localStorage.username überlebt hat.
  5. Was geschieht, wenn Sie den Browser beenden und neu starten? Was geschieht, wenn Sie web1.hszg.de in einem anderen Browser öffnen?
Übung Implementieren Sie für meine Zeichen-Anwendung persistentes Verhalten mithilfe der localStorage.
Übungsaufgabe Neben localStorage gibt es noch sessionStorage. Finden Sie heraus, wie sich diese zwei Dictionaries unterscheiden.