SCHWERPUNKT. Auf einen Blick. Tabelle 1 Speicherplatz pro Domain. Inhalt. dnpcode A1301localStorage

Transkript

1 SCHWERPUNKT HTML5 Web Storage / Local Storage Fünf für jede Domain Moderne Browser stellen für jede Domain fünf MByte lokalen Speicherplatz zur Verfügung. Lesen Sie, wie man den Local Storage nutzt und welche Risiken und Nebenwirkungen dabei bestehen. Auf einen Blick Bernhard Lauer ist freier Redakteur der dotnetpro und arbeitet seit mehr als 15 Jahren als freier Journalist für verschiedene Computer- und Technikzeitschriften. Mit Visual Basic programmiert er seit Version 1.0. Infos unter mail@bernhardlauer.de. Inhalt Was im Zusammenhang mit dem lokalen Speicher zu beachten ist. Zeichenketten im Local Storage ablegen. Objekte und Objekt-Arrays lokal speichern. dnpcode A1301localStorage W eb Storage ist der übergeordnete Name der APIs, welche den lokalen Speicherplatz im Client zur Verfügung stellen. Wikipedia nennt zudem die Bezeichnungen Supercookies und DOM Storage. Ursprünglich war der Web Storage Bestandteil der HTML5-Spezifikation, inzwischen wurde sie in eine eigene W3C-Spezifikation ausgelagert [1]. Web Storage beinhaltet die beiden APIs Local Storage und Session Storage. Beide Varianten bieten dieselben Methoden an. Während die im Session Storage abgelegten Daten jedoch beim Schließen des Browsers wieder gelöscht werden, bleiben die im Local Storage gespeicherten Daten bis zum nächsten Start der Anwendung erhalten theoretisch zumindest (mehr dazu später). Im weiteren Verlauf geht es hier um den Local Storage. Doch alle Anweisungen für den Local Storage sind identisch auch für den Session Stor age implementiert. Browserunterstützung Während man zu Recht viele HTML5-Erweiterungen wegen der unterschiedlichen Unterstützung durch aktuelle Browser noch mit Vorsicht genießen muss, ist der Local Storage bereits in allen modernen Browsern implementiert. Für diesen Artikel wurden alle Beispiele im Internet Explorer 9, in Chrome 19, Firefox 13 (alle unter Windows 7, 64 Bit) sowie im aktuellen Browser von Android Ice Cream Sandwich getestet. Der IE8 unterstützt Local Storage, alle iphones und ipads sowie Android-Geräte ab Version 2.2 bieten den lokalen Speicher an, ebenso wie etliche weniger verbreitete Browser. Mit einer Web- Tabelle 1 Speicherplatz pro Domain. Browser Maximum * Firefox (ab 3.5) 4,98 Internet Explorer (ab IE8, auch IE mobile 9) 4,75 Chrome (ab 5.0) 2,49 iphone/ipad (alle) 2,49 Android (ab 2.2) 2,49 * Millionen Zeichen, nicht Megabyte! (Quelle: [2]) App, die auf Local Storage baut, kann man also schon eine ganze Menge an Geräten erreichen. Wie viel kann man speichern? Generell liest man, dass jeder Browser für jede Domain fünf MByte zum lokalen Speichern von Zeichenketten zur Verfügung stellt. Messungen des Autors an den genannten Browsern haben ergeben: Man kann nicht einfach davon ausgehen, dass sich fünf Millionen Zeichen lokal speichern lassen. Die Internetseite Web Storage Support Test [2] erklärt, warum die Browser dennoch die fünf-mbyte-spezifikation einhalten. Ganz einfach: JavaScript speichert Strings im Format UTF-16, deshalb belegt jedes Zeichen zwei Byte. Auf der Seite kann jeder seinen eigenen Browser testen. Die Ergebnisse werden gespeichert und sind für alle gängigen Browser aufgelistet. Tabelle 1 zeigt einige Ergebnisse. Zu beachten ist dabei, dass es den Browsern überlassen bleibt, wann sie die Daten auf die Festplatte schreiben und damit, wann sie [Abb. 1] Der Internet Explorer 9 meldet, wie viel Speicher noch frei ist. [Abb. 2] Der Anwender kann den lokalen Speicher abschalten

2 SCHWERPUNKT Listing 1 Ein einfaches Beispiel (Auszug). // localstorage1.js window.onload = init; function init() { button1 = document.getelementbyid("butt_sichern"); button1.onclick = buttonclickhandler_sichern; button2 = document.getelementbyid("butt_lesen"); button2.onclick = buttonclickhandler_lesen; function buttonclickhandler_sichern() { var key = document.getelementbyid("key").value; var wert = document.getelementbyid("wert").value; localstorage.setitem(key, wert); function buttonclickhandler_lesen() { var key = document.getelementbyid("key_lesend").value; var wert = localstorage.getitem(key); li.innerhtml = wert + " (Schlüssel war: " + key + "). "; function alleschluesselanzeigen() { var ul = document.getelementbyid("ulalleschluessel"); ul.innerhtml = ""; for ( i=0; i<localstorage.length; i++) { var key = localstorage.key(i); li.setattribute("id", key); li.innerhtml = key; function buttonclickhandler_loeschen() { var key = document.getelementbyid("key_loeschen").value; localstorage.removeitem(key); function buttonclickhandler_alleloeschen() { localstorage.clear(); feststellen, dass der Platz erschöpft ist. Lediglich der Internet Explorer bietet die Methode localstorage.remainingspace an, welche zurückgibt, wie viel Speicherplatz noch zur Verfügung steht (Abbildung 1). Andere Browser unterstützen diese Abfrage offensichtlich (noch) nicht. Allerdings lässt sich mit JSON.stringify(localStorage).length abfragen, wie viele Daten schon im lokalen Speicher abgelegt wurden. Mittels einer Vorgabe für die Gesamtgröße sicherheitshalber dem kleinsten Wert der Zielbrowser kann man zumindest abschätzen, wie viel Platz noch für weitere Daten frei ist. Einen wirklich verlässlichen Wert erhält man allerdings nicht. Der Einfluss der Anwender Eine Sache gilt es noch zu wissen: Ob ein Browser nämlich überhaupt Daten dauerhaft speichert, hat der Anwender in der Hand. Zwar sind die Browser von den Herstellern so konfiguriert, dass der Local Storage funktioniert, in den Einstellungen der Browser kann der Anwender dies allerdings verhindern. Abbildung 2 zeigt die Einstellungen von Chrome 19. Jede der beiden dort gewählten Optionen schaltet den lokalen Speicher ab: Speicherung lokaler Daten nur für aktuelle Sitzung zulassen und Cookies und andere Website- und Plugin-Daten beim Schließen des Browsers löschen. Der Browser interpretiert die Anweisung localstorage dann offensichtlich wie ein sessionstorage. Es gibt keine Fehlermeldungen, die Daten sind einfach beim nächsten Start des Browsers nicht mehr vorhanden. Internet Explorer, Firefox und andere Browser bieten vergleichbare Möglichkeiten zum Abschalten der Speicherfunktion. Und dann wäre da noch die Tatsache, dass Anwender auf ihrem Rechner womöglich mehrere Browser benutzen. Selbstverständlich weiß kein Browser etwas von den lokalen Daten in einem anderen Browser. Die Anwender-Klage Meine Daten sind weg kann somit einfach darin begründet liegen, dass er die Seite mit einem anderen Browser geöffnet hat. Wie sieht das localstorage- API aus? Schön, dass Sie noch weiterlesen nach der Schilderung all dieser Risiken und Nebenwirkungen. Jetzt kommt das Beste am localstorage: Er ist nämlich wirklich einfach zu handhaben. Die wichtigsten Methoden sind schnell aufgezählt: localstorage.setitem(key, value) speichert einen Wert (value) und markiert ihn mit dem Schlüssel (key). localstorage.getitem(key) liest den unter dem Schlüssel gespeicherten Wert wieder aus. localstorage.removeitem(key) löscht den unter dem Schlüssel gespeicherten Wert. localstorage.length() liefert die Anzahl der gespeicherten Datensätze. localstorage.key(index) übergibt den Schlüssel zum Wert an der Position index. localstorage.clear() löscht alle von der aktuellen Domain im lokalen Speicher abgelegten Daten also auch die anderer Anwendungen derselben Domain. Dazu kommt noch der storage-event [3], der aber von vielen Browsern noch nicht unterstützt wird. Mit diesem Instrumentarium wurde das einfache Beispiel (Abbildung 3) erstellt, dessen JavaScript-Code Sie auszugsweise

3 SCHWERPUNKT HTML5 Web Storage / Local Storage [Abb. 3] Einfaches Beispiel zum Testen des local Storage. in Listing 1 und komplett auf der Heft- CD finden (einfachesbeispiel.html und localstorage1.js). Übrigens: Wenn Sie das Beispiel von der Festplatte Ihres Rechners starten, so wird es in Chrome und IE9 nicht funktionieren, denn deren Sicherheitsrichtlinien sehen vor, dass der lokale Speicher nur von echten Webservern angesprochen werden darf. Im Localhost funktioniert es und wer eine aktuelle Version von Firefox hat, kann das Beispiel auch aus dem Dateisystem starten. Mit dem Code aus Listing 1 speichern Sie neue Einträge (function buttonclick- Handler_Sichern), können sie wieder auslesen (buttonclickhandler_lesen) und einen (buttonclickhandler_loeschen) oder alle Einträge (buttonclickhandler_alle- Loeschen) löschen. Nach dem Programmstart sowie nach jeder Aktion wird die Funktion alle- SchluesselAnzeigen aufgerufen. Sie durchläuft alle im lokalen Speicher abgelegten Items in einer for-schleife: for ( i=0; i<localstorage.length; i++) { In der Schleife wird der Schlüssel zu jedem Item ausgelesen und in einem Listenelement auf der HTML-Seite angezeigt. Dabei werden auch Schlüssel gelistet, welche von anderen Anwendungen derselben Domain auf dem Rechner abgelegt worden sind. localstorage.key(i); li.setattribute("id", key); li.innerhtml = key; Mit diesem Beispiel können Sie den lokalen Speicher Ihres Browsers ausgiebig testen. Dabei werden Sie feststellen, dass die Schlüssel Groß- und Kleinbuchstaben unterscheiden (fcb, FCB und fcb sind drei unterschiedliche Keys) und dass ein neuer Wert den alten Wert mit demselben Schlüssel ohne jede Warnung überschreibt. Wird versucht, ein Element mit einem nicht existierenden Schlüssel auszulesen, wird null zurückgeliefert und es wird keine Exception geworfen. Der Button ganz unten löscht den kompletten Speicher der Domain, von der sie die HTML-Seite gestartet haben, mit localstorage.clear. Auch die Daten anderer Anwendungen derselben Domain gehen damit verloren. Arrays und Objekte speichern Einzelne Strings zu speichern ist ja schön und gut, aber besser wäre es schon, wenn Listing 2 Array lesen und anzeigen (Auszug). // localstorage2.js function init() { buttonclickhandler_arraylesen(); Listing 3 Array speichern (Auszug). function buttonclickhandler_arraysichern() { var vorname = document.getelementbyid("vorname").value; var nachname = document.getelementbyid("nachname").value; // zum Personen-Array hinzufügen personen.push(vorname + " " + nachname); localstorage.setitem(arraykey, JSON.stringify(personen)); buttonclickhandler_arraylesen() man Objekte oder zumindest Arrays direkt in den lokalen Speicher schreiben könnte. Das klappt auch, dafür muss man sie allerdings zuvor in Strings umwandeln. Dafür bietet JavaScript seine eigene Objekt-Schreibweise, bekannt als JSON [4], und die beiden Anweisungen: JSON.stringify und JSON.parse. JSON.stringify wandelt das übergebene Array oder Objekt in seine Zeichenketten- Repräsentation in der JavaScript Object Notation. Für den Rückweg gibt's JSON. parse. JSON akzeptiert die folgenden Datenformate: Nullwert (null), boolescher Wert (true, false), Zahl, Zeichenkette, Array, Objekt. function buttonclickhandler_arraylesen() { var wert = JSON.parse(localStorage.getItem(arraykey)); if (wert!= null) { if (personen.length < 1 && wert.length > 1) personen = wert; li.innerhtml = wert + " (Schlüssel war: " + arraykey + "). ";

4 SCHWERPUNKT [Abb. 4] Das ArrayBeispiel in Aktion: Die Namen der Spieler wurden nach Facebook ganz privat einander erfasst und automatisch ausgele sen und angezeigt. Wo dies möglich ist, wandelt JSON. stringify auch andere Datenformate in ihre String-Repräsentanzen um, beispielsweise das Datumsformat date, wie im Objekt-Beispiel weiter unten zu sehen ist. Via Base64 [5] lassen sich auch Bilder oder Binärdaten in Zeichenketten wandeln und speichern. Das einfache Beispiel von oben wird nun in zwei Stufen erweitert. Einmal so, dass es ein Array speichert, und anschließend lernt es dann, Objekte direkt zu sichern und auch Listen von Objekten im lokalen Speicher zu sichern. Das Beispiel zum Speichern von Arrays nutzt die Dateien arraybeispiel.html und localstorage2.js (beide auf der Heft-CD). Die HTML-Datei ist nahezu identisch mit der aus dem einfachen Beispiel und wird hier nicht erläutert. Die Änderungen im JavaScript-Code werden hier kurz be sprochen. var personen = new Array(); var arraykey = "dnparray"; Es wird ein neues Array angelegt, das die Namen von Personen speichern wird. Für das Personen-Array wird nur ein Schlüssel gebraucht, daher wird auch dieser (arraykey) gleich zu Beginn festgelegt. Die bereits im Array gespeicherten Personen müssen beim Start eingelesen werden, siehe Listing 2. Beim Einlesen des Arrays wird der gespeicherte String mit JSON.stringify() in ein Array zurückverwandelt. Der Inhalt des Personen-Arrays wird anschließend als neuer Punkt unter der Überschrift Gelesen wurden als einfacher String ausgegeben. Man könnte das Array dazu auch Index für Index durchgehen, um die Ausgabe überwww.dotnetpro.de sichtlicher zu machen das folgt bei der Ausgabe der Objektliste weiter unten. Das Erweitern und Speichern des Arrays übernimmt die Funktion buttonclickhandler_arraysichern (Listing 3). Vor- und Nachname werden ausgelesen, verkettet, an das Personen-Array angehängt, zum JSON-String umgewandelt und lokal gespeichert. Damit man zum Auslesen nicht extra klicken muss, wird der Handler zum Lesen des Arrays hier direkt aufgerufen. Das war's auch schon, siehe Abbildung 4. Objekte und Objektlisten Das abschließende Beispiel ist in die Da teien objektbeispiel.html und local Stor age3.js verpackt und ist wieder eine kleine Erweiterung der vorhergehenden Beispiele. Diesmal soll aus Benutzereingaben für Vor- und Nachname ein Objekt erzeugt werden. Es bekommt zusätzlich noch die Eigenschaften erfasstam (Typ: date) und ausweis, welche im Konstruktor des Objektes erzeugt werden (Listing 4). Listing 4 JavaScript-Konstruktor des Objektes Person. function Person(vorname, nachname) { this.vorname = vorname; this.nachname = nachname; var d = new Date(); this.erfasstam = d; this.ausweis = this.nachname + ", " + this.vorname + " (" + d.getdate() + "." + (d.getmonth() + 1) + "." + d.getfullyear() + ")"; Baue dein privates Netzwerk in Facebook mit deinen besten Freunden Stream deiner ausgesuchten Freunde 7 Filter für deinen individuellen Stream Blockieren von Drittanwendungen Teile Lieblingsmomente mit deiner Clique Übersicht aller Events deiner besten Freunde

5 SCHWERPUNKT HTML5 Web Storage / Local Storage [Abb. 5] Die Entwicklertools von Chrome zeigen den Inhalt des lokalen Speichers tabellarisch an. personenliste.push(neueperson); localstorage.setitem(arraykey, JSON.stringify(personenliste)); Zum Auslesen der Personenliste (siehe Listing 5) wird der String mit JSON. parse () wieder in ein Objekt-Array zurückgewandelt. Diesmal werden alle Elemente des Arrays durchlaufen und jeder Eintrag einzeln ausgegeben. Dazu wird die Eigenschaft ausweis herangezogen: li.innerhtml = wert[i].ausweis + ; Würde man lediglich das Objekt selbst ausgeben lassen (wert[i]) und nicht die Eigenschaft ausweis angeben, so sähe die Ausgabe für alle Elemente gleich aus, nämlich so: Wie schon oben gesagt, gehört date nicht zu den von JSON unterstützten Datentypen. Gespeichert wird deshalb eine String-Repräsentanz des Datums. Nach dem Wiedereinlesen des Objektes hat die Eigenschaft erfasstam daher den Typ string. Dieser lässt sich aber leicht wieder in ein Datum zurückverwandeln: var wert = JSON.parse( localstorage.getitem(arraykey)); for ( i = 0; i < wert.length; i++) { wert[i].erfasstam = new Date(wert[i].erfasstAm); Wer prüfen möchte, wie JSON den Datentyp date auf der Festplatte abgelegt hat, der kann dies mithilfe der Entwicklertools von Google Chrome tun. Unter Ressources Local Storage wählt man eine Website aus Listing 5 Objekt-Array lesen und anzeigen. und kann alle von dieser Site gespeicherten Daten einsehen (Abbildung 5). Klickt man mit der rechten Maustaste auf einen der Einträge, kann man diesen auch über die Entwicklertools löschen oder editieren. In der Funktion buttonclickhandler_ objektesichern wird mithilfe des Konstruk tors auf Basis der Benutzereingaben ein neues Person-Objekt angelegt: neueperson = new Person(vorname, nachname); Anschließend wird die Person als einzelnes Objekt im lokalen Speicher abgelegt, wobei die Eigenschaft ausweis als Schlüssel hergenommen wird: localstorage.setitem(neueperson.ausweis, JSON.stringify(neuePerson)); Dieser Schritt dient nur zur Demonstration. Üblicherweise packt man derlei Objekte in Objektlisten, hier in das Array personenliste, und speichert die Liste: // aus localstorage3.j function buttonclickhandler_arraylesen() { var wert = JSON.parse(localStorage.getItem(arraykey)); if (wert!= null) { if (personenliste.length < 1 && wert.length > 1) personenliste = wert; ul.innerhtml = ""; for ( i = 0; i < wert.length; i++) { li.innerhtml = wert[i].ausweis + " (Schlüssel war: " + arraykey + "). "; [object Object] (Schlüssel war: dnpobjarray). Fazit Der Local Storage wird bereits von vielen Browserversionen unterstützt und ist sehr einfach zum Speichern von Daten einzusetzen. Insbesondere im Zusammenhang mit dem Offline-Modus von HTML5 ist Local Storage interessant der kommt mit dem IE10 [6], viele andere Browser beherrschen ihn schon. Sollen viele Daten gespeichert werden, kann es schwierig werden, abzuschätzen, wann der lokale Speicher knapp wird. Außerdem können die Anwender den lokalen Speicher zwischen den Sitzungen löschen eventuell auch unbewusst über Tools wie CCleaner. Um hier einem Datenverlust vorzubeugen, muss zumindest ein einfacher Webservice auf dem Server laufen und die Daten zwischenspeichern, um sie bei Bedarf wiederherstellen zu können. Dass bestehende Werte überschrieben werden, wenn neue Daten mit dem passenden Schlüssel übergeben werden, bedeutet, dass auf Websites, auf denen mehrere Webanwendungen den Local Storage nutzen, eine ausgeklügelte Verwaltung der Keys vorhanden sein sollte, um diese Fehlerquelle auszuschließen. [bl] [1] W3C-Spezifikation, [2] Web Storage Support Test, [3] Storage-Event beim W3C, [4] JSON, [5] Base64, [6] Anwendungscache-API ( AppCache ),