Lokale Speicherung mit HTML5

1. Lokale Speicherung mit HTML5
2. Ereignisse von Storage
3. Neue Schnittstelle: IndexedDB

© Internet Magazin

Cookies waren bis jetzt die einzige Standardmöglichkeit, Daten lokal über den Browser auf dem Computer eines Website-Besuchers zu speichern. Die Anforderungen aus den Anwendungen sind dabei vielfältig. Viele Webseiten, die eine Registrierung erfordern, legen ein Zugangstoken auf Ihrem Computer ab, damit Sie sich nicht mehrfach anmelden müssen, solange Sie sich auf der Website befinden.Findet die Anwendung später ein solches Cookie, werden Sie zumindest erkannt und persönlich angesprochen. Auch die Werbeindustrie nutzt diese Technologie intensiv, beispielsweise um Ihnen individuelle Angebote zu machen. Aufgrund solcher Werbeeinsätze löschen viele Anwender beim Schließen ihres Browsers automatisch alle gespeicherten Cookies.

Alternative mit HTML5

Durch den vielfältigen Einsatz von Cookies hat die Web Hypertext Application Technology Working Group (WHATWG) bei der Konzeption von HTML5 dieses Thema aufgegriffen und definierte Strukturen für die lokale Speicherung von Daten auf der Festplatte des Besuchers einer Website festgelegt. Zwar ist die Implementierung und Umsetzung von HTML5 in aktuelle und kommende Browser-Generationen noch voll im Gange, die lokale Datenspeicherung ist jedoch bei einer Reihe von Browsern bereits umgesetzt.Die Arbeitsgruppe hat die lokale Speicherung der Daten in drei unterschiedliche Varianten unterteilt:

• Speicherung von Sessions
• Längerfristige lokale Speicherung
• Einsatz von lokalen Datenbanken.

Mit einer einfachen Abfrage können Sie überprüfen, welche dieser Funktionen ein Browser aktuell bereits unterstützt. if(sessionStorage == null)
document.write("HTML5 Speicherung
nicht ueberstuetzt");

Speicherung von Sessions

Die gebräuchlichste Methode um Zustände einer Session zu speichern, ist über die Verwendung von Cookies. Die Speicherung von Sessions in HTML5 bedient sich der gleichen Grundsätze, bietet aber eine Reihe zusätzlicher Funktionen und Vorteile.Der Speicherplatz eines Cookies ist auf 4 kBytes limitiert. Damit ist die Speicherung größerer Datenmengen nicht möglich. Ein Cookie eignet sich lediglich für kleine Informationsmengen. Diese harte Restriktion besteht bei der Speicherung von Sessions mit HTML5 nicht mehr. Die Größe des zur Verfügung stehenden Speicherplatzes ist in der Norm nicht definiert, wird aktuell durch den Browser vorgegeben und beträgt aber im Normalfall mehrere Hundert Kilobytes.Beim Einsatz von Cookies entsteht darüber hinaus ein gewisser Kommunikationsoverhead beim Datenaustausch zwischen dem Browser und Ihrem Webserver. Bei jedem HTTP-Request wird das Cookie mitgesendet. Die Daten, welche HTML5 zu einer Session speichert, können gezielt übertragen werden. Sie entscheiden als Entwickler selbst, welche Wertepaare bei einer Anfrage übergeben werden müssen.

© Internet Magazin

Ein Browser unterscheidet aktuell nicht, mit welcher Session des Browsers Ihr Cookie erzeugt wurde. Bei einer Authentifizierung, die auf Cookies basiert, bringt dies Vor-, aber auch Nachteile mit sich. Einmal angemeldet können Sie das Authentifizierungs-Cookie mit allen Tabs des Browsers nutzen. Melden Sie sich jedoch an einem Tab vom Dienst ab, ist das Cookie für den kompletten Browser gelöscht. Die Speicherung einer Session kann für ein Browser-Fenster oder eine Registerkarte gesetzt werden.Die Speicherung der Session wird in HTML5 mit dem DOM-Objekt session-Storage umgesetzt. Die Daten sind so lange gültig, bis Sie entweder den Browser oder die Registerkarte geschlossen ober die gespeicherten Informationen direkt über das Skript gelöscht haben.

sessionStorage.setItem('mein_name',
'Andreas Hitzig');
alert("Du heisst " + sessionStorage.
getItem('mein_name'));
alert("Hallo, " + session-
Storage.mein_name); sessionStorage.removeItem('mein_name');

In der ersten Zeile des Skripts wird ein Wertepaar mit der Variablen mein_name und dem zugeordneten Wert "Andreas Hitzig" erzeugt. Dazu wird die Funktion setItem() verwendet. Es gibt mehrere unterschiedliche Wege, wie Sie auf die Variable zugreifen können: entweder über die Funktion getItem() oder mit einem direkten Zugriff über sessionStorage. NamederVariable, also im Beispiel sessionStorage.mein_name. Benötigen Sie die Variable und den gespeicherten Wert nicht, können Sie die Daten mithilfe der Funktion removeItem() löschen.

Längerfristige Speicherung

Neben der kurzfristigen Speicherung sieht die Definition auch noch einen dauerhaften lokalen Speicherplatz vor. In diesem können Anwendungen Ihre Daten ablegen und bei der nächsten Session wieder aufgreifen. Der Speicherplatz ist immer auf eine konkrete Website bezogen und kann auch nur von dieser ausgelesen werden.Von der Handhabung ist der globale Speicher gleich aufgesetzt wie der lokale Speicher, nutzt jedoch zum Zugriff localStorage anstelle von sessionStorage. Es gibt jedoch in den Eigenschaften zwei entscheidende Unterschiede: Der Speicher von localStorage besteht auch nach dem Schließen des Fensters und des Browsers weiter. Damit kann auch Tage später noch auf die Inhalte zugegriffen werden. Der lokale Speicher ist nicht an ein Browserfenster oder eine Registerkarte gebunden. Alle Browserfenster können auf die gespeicherten Inhalte zugreifen.

localStorage.setItem("mein_name",
"Andreas Hitzig");
alert("Du heisst " + localStorage.
getItem("mein_name"));
alert("Hallo " + localStorage.mein_
name);
localStorage.removeItem("mein_name");

Storage-Interface im Überblick

Wie Sie in den beiden Beispielen gesehen haben, bedienen sich beide DOM-Objekte der Storage-Schnittstelle. Diese Schnittstelle bietet eine Reihe von Funktionen sowie ein Attribut.

interface Storage {
readonly attribute unsigned long
length;
DOMString key(in unsigned long
index);
getter any getItem(in DOMString key);
setter creator void setItem(in
DOMString key, in any value);
deleter void removeItem(in DOMString
key);
void clear();
};