HTML5 Rocks

HTML5 Rocks

HTML5 Funktionen

Speicher

Wenn Webentwickler über das Speichern von Nutzerdaten nachdenken, denken sie sofort an einen Upload auf den Server. Mit HTML5 ist dies nicht mehr nötig, da verschiedene Techniken es der App nun ermöglichen, Daten auf dem Client-Gerät zu speichern. Die Daten können später mit dem Server synchronisiert werden oder immer auf dem Client verbleiben: Dies entscheidet allein der Entwickler.

Es gibt viele Gründe für die Verwendung des clientseitigen Speichers. Zunächst können Sie Ihre App so konfigurieren, dass Ihre Nutzer sie auch offline verwenden können und bei erneuter Netzwerkverbindung gegebenenfalls Daten synchronisiert werden. Darüber hinaus können Sie so die Leistung steigern. Sie können einen großen Datenkorpus anzeigen, sobald die Nutzer auf Ihre Website klicken, ohne dass auf einen Download gewartet werden muss. Drittens stellt diese Methode ein einfacheres Programmierungsmodell dar, das keine Serverinfrastruktur erfordert. Natürlich sind die Daten angreifbarer und die Nutzer können nicht über mehrere Clients darauf zugreifen, darum sollten Sie dieses Modell nur für nicht kritische Daten verwenden, insbesondere für zwischengespeicherte Versionen von Daten, die sich auch "in der Cloud" befinden. Im Artikel "Offline": What does it mean and why should I care? (in Englisch) finden Sie eine allgemeine Besprechung der Offline-Technologien, zu denen auch die clientseitige Speicherung gehört.

Neuerungen

Offline Technologies

  • Web Storage bietet einfach eine Schlüsselwertzuordnung, z. B. localStorage["name"] = nutzername;. Leider unterstützen die vorhandenen Implementierungen nur String-zu-String-Zuordnungen, sodass Sie für andere Datenstrukturen Serialisierungen einrichten und aufheben müssen. Dazu können Sie JSON.stringify() und JSON.parse() verwenden.
  • Web SQL-Datenbanken bieten die gesamte Leistung - und den Aufwand - von strukturellen relationalen SQL-Datenbanken.
  • Indexierte Datenbanken können zwischen Web Storage und Web SQL-Datenbanken eingeordnet werden. Wie Web Storage verfügen sie über eine unkomplizierte Schlüsselwertzuordnung, unterstützen jedoch auch Indizes wie bei relationalen Datenbanken. Dies ermöglicht eine schnelle Suche nach Objekten, die einem bestimmten Feld entsprechen, und Sie müssen nicht jedes Objekt im Speicher manuell durchlaufen.
  • Mit dem File Access API können Dateien in JavaScript gelesen werden. Wenn ein Nutzer eine Reihe von Dateien zu einem "File"-Eingabeelement hinzugefügt hat, können Sie den Inhalt der Datei lesen oder über eine URL darauf verweisen. Hat ein Nutzer beispielsweise eine Bilddatei angegeben, können Sie das Bild anzeigen. Es sind auch bereits Vorschläge für das Schreiben von Dateien in Arbeit.

Einen ausführlichen Vergleich von clientseitigen Speichertechniken mit Code-Demos finden Sie im Artikel zur clientseitigen Speicherung.

Demos

HTML5 Demos: Storage
Synchronization with localStorage
Timer demo

In der Wildnis

Mobile Gmail
MugTug Darkroom

Ressourcen