HTML5 Grundkurs

Lokale Datenspeicherung (Web Storage)

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Zur lokalen Datenspeicherung gibt es Cookies sowie einige browserspezifische, aber nicht weit verbreitete Ansätze. HTML5 bietet hier Neuerungen – sowohl zur temporären als auch dauerhaften Speicherung von Informationen.
08:06

Transkript

Das lokale Speichern von Daten ist seit jeher ein wichtiger use case für Webapplikationen aller Art. Eine der ersten Lösungen hierfür stammt von der Firma Netscape mit den 1990er Jahren, ganz klar, ich rede von Cookiess. Cookies sind Textinformationen, die einen Server an den Browser schickt, die von diesem gespeichert und bei zukünftigen http-Anfragen wieder zurück an den Sender geschickt werden. Prinzipiell ein ganz guter Ansatz, aber wenn wir jetzt stärker in Richtung JavaScript-Anwendungen gehen und JavaScript- Logik im Browser, kann es doch so sein, dass JavaScript auf lokalgespeicherte Daten zugreifen will, diese auch speichern will. Das geht zwar auch mit Cookies. JavaScript hat kompletten Zugriff auf Cookies, aber in so einem Fall müssen wir vielleicht nicht die Information bei jeder http-Anfrage wieder zurück an den Server jagen. Deswegen gibt es einen weiteren Ansatz hierfür, die auch andere der Cookie-Limitationen, etwa das ein Cookie nur 4 Kilobyte Große bedarf, umgeht. Und zwar gibt es dafür mehrere Begriffe. DOM Storage und Web Storage sind die, die man am häufigsten hört. Ich verwende persönlich ganz gerne Webstorage, aber da finden sich beides in sowohl der Literatur als auch in der Spezifikation übrigens. Dieser DOM oder Web Storage,der unterteilt sich in zwei verschiedene Arten, und zwar einmal localStorage. localStorage ist ein Begriff für Daten, die lokal gespeichert werden, wie ähnlich persistente Cookies, und der bleibt auch noch, wenn der Browser geschlossen und später wieder geöffnet wird. sessionStorage statt gegen ist für Informationen, die nach dem Schließen des Browsers automatisch gelöscht werden sollen, also nur temporär notwendige Informationen. Die Schnittstelle für beides ist gleich. Ich lege es einfach mal eine Datei an, nenne die storage.html und in diese Datei werde ich mit lokalStorage arbeiten das heißt, mit Daten, die auch nach einem Browser-Neustart noch da wären. Immer, wenn ich jetzt mit lokalStorage arbeite, das entsprechende Objekt heißt tatsächlich so localStorage mit großem S, können Sie stattdessen auch sessionStorage verwenden (auch mit großem S in der Mitte geschrieben). Die Schnittstelle ist komplett dieselbe, das heißt also, über diese API kommen Sie es wohl an lokal-, sowohl sessionStorage heran, Sie müssen nur die Namen jeweils austauschen. Die Schnittstelle selber ist auch sehr, sehr einfach, lokalStorage ist so eine Art, ja, Hashtable-Dictionary, in dem können verschiedene Einträge gespeichert werden unter einem Schlüssel, das heißt, wir haben eigene Schlüssel/Wert-Paare. Wichtige Einschränkung, für Schlüssel und Wert kann ich nur Strings verwenden. Ich kann also nur Zeichenketten speichern. Komplexere Objekte müsste ich irgendwie serialisieren. Will ich vielleicht nicht automatisch, aber dank der JSON-Features den JavaScript eingebaut, sind relativ bequem. Der meiner Meinung nach einfachste Zugriff auf diese lokal- oder sessionStorage-Informationen geht über zwei Methoden. Es ging ja über new array-Syntax, aber ich finde,das wird mit der Methode einfach praktischer persönlich, und zwar gibt es setItem. Und dann gebe ich einfach einen Schlüssel an und einen Wert, und das schreibt eben früher einen bestimmten Schlüssel,einen bestimmten Wert in den Datenspeicher. Und dann gibt es noch localStorage.getItem, und das holt zu einem bestimmten Schlüssel ein Wert. Das ist also die ganze API. Es gibt da noch, Sie sehen das auch, IntelliSense, also ein Autogen zu clear, was den completten localStorage löscht. Ich kann auch mit removeItem einen Eintrag in der Liste löschen, habe noch ein paar andere Optionen, Art von Prinzipien, es ist eine Mischung aus getItem und setItem. Und so lassen sich dann in der Tat Daten speichern. Lassen Sie uns das anhand eines kleinen Beispiels ausprobieren, und zwar erzeuge ich Formular und in dem Formular habe ich ein Textfeld, ganz klassisches, also kein neues HTML5-Formular-Element ausnahmsweise. Und kann ein Benutzer ein aktuelles Lebensmotto eintragen und dieses Lebensmotto dann sozusagen verewigen, und es wird im localStorage gespeichert Also machen noch eine Schaltfläche dran und diese Schaltfläche, die nenne ich jetzt einfach mal "Speichern", gebe noch eine ID, und dem Textfeld gebe ich auch noch eine ID, dann können wir relativ bequem darauf zugreifen. Und so jetzt bitte ernst sozusagen, das heißt, ich will zunächst ein paar Event-Handler anlegen, und das mache ich am besten, sobald die Seite komplett geladen ist, auch hier wieder. Da wir keine externe Resourcen noch laden, können wir ruhig auf onload warten und liegen jetzt Event-Handler an. Also, wenn auf die Schaltfläche geklickt wird in add.Event.Listener, dann soll irgendwas passieren, was genau, darum kümmern wir uns jetzt etwas später. Und außerdem soll beim Laden der Seite noch noch irgendwie der aktuelle Status angezeigt werden, also das aktuelle Motto. Die Idee ist, Benutzer kann sein Motto eintragen. Es erscheint aber immer das aktuelle Motto, das heißt, auch bevor etwas eingetragen wird, und die Schaltflächen "Speichern" betätigt wird, erscheint aus der Datenbank so fern vorhanden das aktuelle Motto. Bereits dafür brauchen wir vielleicht noch ein Ausgabeelement. Es gab mal Plannungen für HTML5, mit einem Element, namens output zu arbeiten, wird wahrscheinlich abgeschafft. Wir nehmen deswegen einfach einen Absatz. So. Und dann schreibe ich mal die Funktion zeigeStatus. Und diese Funktion zeigeStatus liest das aktuele Motto und gibt es aus, also var motto = localStorage.getItem("motto"). Ja, und das Motto wird irgendein Text sein, außerhalb wir haben noch kein Motto angelegt. Dann sollten wir vielleicht nichts ausgeben, d.h., nur wenn ein Motto gesetzt ist, können wir so abfragen, greifen wir auf dieses Ausgabeelement zu, also document.getElementByID ja, und setzen die innerHTML Eigenschaft auf das Motto. Es ist wahrscheinlich der einfachste Weg hier. Was passiert jetzt, wenn wir auf diese Schaltfläche klicken? Na ja, dann wollen wir zunächst das aktuelle Motto abspeichern, das heißt, wir holen uns das Motto aus dem Eingabefeld, heißt txt, also document.getElementById von "txt" .value, und dann machen wir localStorage.setItem "motto" heißt der Schlüssel und die Variable motto ist der entsprechende Wert. Und nachdem wir die Daten gespeichert haben, wollen wir natürlich auch wieder diesen Status anzeigen- zeigeStatus. Also rufe hier zeigeStatus auf. Und wenn wir die Seite laden, dann zeigen wir es recht noch mal den Status an, das heißt, beim Laden der Seite zeigen wir einmal den Status an. Immer, wenn wir einen neuen Status setzen, also neue Daten in unserem localStorage schreiben, damit gegebenenfalls die alten überschreiben, aktualisieren wir die Statusanzeige, Wir proben auf das Example. Machen wir im Chrome Browser, wovon also die Seite auf Vorher mache ich noch mal die Tools an, und weiß er nie, geh auf storage.html. Noch erscheint kein Motto. Wir haben hier keines. Was nehmen wir als Motto? Jugendwort des Jahres, ich glaube, 2012 oder 13. Speichere das Ganze. Und es erscheint hier auch tatsächlich, und wenn ich hier die Seite neu lade, sehen Sie, dass dieses Motto hier tatsächlich eingetragen wird. Und wenn ich das irgendwas ändere, dann aktualisiert sich das hier direkt. Im Resources Tab vom Google Chrome, also von F12-Tools hier, sehen Sie auch, dass es hier Einträge localStorage und sessionStorage gibt. Wenn wir jetzt auf localStorage gehen, sehen Sie Einträge von allen Websites, die localStorage angelegt haben. Auf dem System ist es bisher nur eine gewesen. Schauen Sie ruhig mal in dem Browser, den Sie sonst produktiv benutzen, welche Websites sich also breit gemacht haben, und in der Tat sehen wir jetzt hier die Daten, die von uns cotechnisch eingetragen worden sind. Es handelt sich also bei localStorage um eine sehr, sehr einfache Programmier-Schnittstelle, mit der wir Daten abspeichern können, die dann auch gegebenenfalls einen Browser-Neustart überstehen eben komplett, ohne Cookies und sehr browserkompatibel.

HTML5 Grundkurs

Machen Sie sich mit HTML5 fit für das Webdesign von morgen, angefangen vom Erstellen einfacher HTML-Dokumente bis hin zur Gestaltung anspruchsvoller Layouts.

3 Std. 11 min (29 Videos)
Derzeit sind keine Feedbacks vorhanden...

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!