Web Storage

Web Storage (auch DOM Storage oder Supercookies genannt) ist eine Technik für Webanwendungen, mit der Daten in einem Webbrowser gespeichert werden. DOM Storage unterstützt persistente Datenspeicherung, ähnlich Cookies, ebenso wie die lokale, Session-spezifische Speicherung.

DOM Storage wird durch das World Wide Web Consortium (W3C) standardisiert. Ursprünglich war es Teil der HTML5-Spezifikation, wurde mittlerweile aber in eine eigene Spezifikation ausgegliedert.^[1]

Merkmale

DOM Storage kann vereinfacht als eine Weiterentwicklung von Cookies („Super-Cookies“) angesehen werden. Die Technik bietet weitaus größere Speicherkapazität (5 MB pro Domain in Firefox^[2], 10 MB pro Storage Area im Internet Explorer^[3]) und bessere Entwicklungs-Schnittstellen. In einigen Punkten unterscheidet sie sich jedoch von Cookies.

Client-seitige Schnittstelle

Im Gegensatz zu Cookies, auf die sowohl Server als auch Client zugreifen können, wird DOM Storage vollständig vom Client gesteuert. Es werden hierbei nicht mit jedem HTTP-Request Daten zum Server übertragen und ein Webserver kann auch nicht direkt Daten im DOM Storage schreiben. Der Zugriff erfolgt ausschließlich über Skripte auf der Webseite.

Speicherung

DOM Storage bietet zwei verschiedene Arten der Speicherung an: lokale (localStorage) und Session-spezifische (sessionStorage). Sie unterscheiden sich in Gültigkeitsbereich und -dauer.

Lokale Speicherung

Daten, die lokal gespeichert werden, sog. Local Shared Objects (LSO), sind mit einer Domain verknüpft und bleiben auch nach Beenden des Browsers bestehen. Alle Skripte einer Domain, von der aus die Daten gespeichert wurden, können auf die Daten zugreifen.

Bei Mozilla Firefox werden die Daten in der Datenbankdatei webappsstore.sqlite gespeichert. Mit einem geeigneten Programm kann die SQLite3-Datei betrachtet werden. Es existieren Browser-Addons, die zu dem Zweck entstanden sind, diese Daten vom System wieder löschen zu lassen, auch automatisiert, z. B. mit Better Privacy. Über die Eingabe von „about:config“ in der Adresszeile kann der Wert von dom.storage.enabled von true zu false geändert, und DOM-Storage-Objekte somit abgeschaltet werden.

Session-spezifische Speicherung

Session-spezifisch gespeicherte Daten sind mit dem Browser-Fenster verknüpft und auf dieses beschränkt. Gespeicherte Daten werden beim Schließen des Browser-Fensters gelöscht. Diese Technik bietet die Möglichkeit, mehrere Instanzen derselben Anwendung in verschiedenen Fenstern laufen zu lassen, ohne dass es zu einer gegenseitigen Beeinflussung kommt, was von Cookies nicht unterstützt wird.^[4]

Datenmodell

DOM Storage speichert Daten in einem assoziativen Array, in dem die Schlüssel und Werte Strings sind. Über eine zusätzliche Programmierschnittstelle zum Zugriff auf strukturierte Daten, möglicherweise auf SQL-Basis, wird derzeit innerhalb der Web Applications Working Group des W3C diskutiert.^[5]

Verwendung

Daten können mit den Funktionen setItem und getItem, gespeichert und wieder ausgelesen werden.

localStorage

// Speichert ein Key-Value-Paar im localStorage
// Die Daten können auch nach dem Schließen des Browsers ausgelesen werden
localStorage.setItem('key', 'value');
 
// Liest den eben gespeicherten Wert aus und zeigt ihn an
alert(localStorage.getItem('key')); // value

sessionStorage

// Speichert ein Key-Value-Paar im sessionStorage
// Die Daten werden nach dem Schließen des Browsers gelöscht
sessionStorage.setItem('key', 'value');
 
// Liest den eben gespeicherten Wert aus und zeigt ihn an
alert(sessionStorage.getItem('key')); // value

Speichern von JSON-Objekten

In Web Storages können nur Strings gespeichert werden. Möchte jedoch ein JSON-Objekt gespeichert werden, muss dieses vor dem Speichern in einen String konvertiert werden. Beim Auslesen kann es dann wieder in ein JSON-Objekt zurückkonvertiert werden.

localStorage.setItem('key', JSON.stringify({firstname: 'Peter', lastname: 'Meier'}));

alert(JSON.parse(localStorage.getItem('key')).firstname); // Peter

Namensgebung

Der Entwurf des W3C spricht von „Web Storage“, obwohl „DOM Storage“ inzwischen der gebräuchlichere Name ist.^[6]^[7]

Die Abkürzung „DOM“ in „DOM Storage“ steht nicht in direkter Verbindung zum Document Object Model: „Die Bezeichnung DOM bezieht sich auf die Anwendungsschnittstellen, die Skripten in Webanwendungen zur Verfügung stehen, und impliziert nicht notwendigerweise die Existenz eines tatsächlichen Dokumenten-Objekts [...]“^[8]

Browser-Unterstützung

Web Storage wird von folgenden Browsern unterstützt: ^[9]

Browser	ab Version
Google Chrome	4
Mozilla Firefox	3.5
Opera	10.5
Internet Explorer	8
Safari	4
iOS	3.2
Android	2.1

Weblinks

Einzelnachweise

[1] Web Storage Spezifikaten des W3C (World Wide Web Consortium)

[2] John Resig: DOM Storage

[3] MSDN: Introduction to DOM Storage

[4] W3C: Web Storage draft standard

[5] W3C: Web Storage draft standard

[6] Mozilla Developer Center: DOM Storage

[7] MSDN: Introduction to DOM Storage

[8] W3C: Web Storage draft standard

[9] ttp://www.html5rocks.com/en/features/storage

[1]

[2]

[3]

[4]

[5]

[6]

[7]

[8]

[9]