HTML 5 localStorage ([PILG11], Kap. 7)

Dies ist ein gegenüber Cookies verbessertes Konzept zur clientseitigen Speicherung von Daten. Es basiert auf Schlüssel/Wert-Paare. Die W3C-Spezifikation "Web Storage" unterscheidet das Speichern der Daten bis zum Ende einer Sitzung ("Session storage") oder noch weiter ("Local Storage").
Sobald das aktuelle Fenster oder der Reiter geschlossen wird, wird die Sitzung beendet. Somit stehen pro Reiter und Fenster verschiedene Sitzungs-Speicher zur Verfügung, die sich nicht selbst gegenseitig beinflussen können. Dieser Speicher kann mit dem Namen sessionStorage benutzt werden. Soll die Speicherung auch nach dem Schliessen des Fensters oder des Reiters erhalten bleiben (also auch bei Neustart des Rechners oder des Browsers), kann der Speicher mit localStorage referenziert werden. Die Verwendung der beiden Objekte ist hierbei gleichartig.
Cookies sind in der Größe beschränkt (etwa 4 KB), und werden mit jeder HTTP-Anfrage vom Browser mitgeschickt, was den Netzwerkverkehr erhöht und verlangsamt. localStorage-Daten bleiben auf dem Rechner des Benutzers und können mittels Javascript bearbeitet werden. Dazu erhält das window-Objekt eine Eigenschaft 'localStorage', sofern das Konzept unterstützt wird.
Zum Thema Sicherheit ist zu sagen, dass jeder mit Zugriff auf dem Rechner auf die Storage-Daten zugreifen kann, im Browser kann jede Webseite die eigenen Daten lesen, nicht aber die von anderen Seiten gespeicherten (sog. Same-Origin-Restriktion). Cookies wurden (ausser bei Verwendung von SSL) unverschlüsselt über das Netz geschickt.
Die Speichergröße ist laut Spezifikation auf 5MB pro Seite begrenzt, wobei Ziffern als einzelne Zeichen gespeichert werden. Damit sind die klassischen Online-Shops ein Anwendungsgebiet für 'localStorage'.

Funktionen

Kategorie Lösung/Methodenaufruf
Unterstützung prüfenif (('localStorage' in window) && (window['localStorage']!= null))
if (('sessionStorage' in window) && (window['sessionStorage']!= null))
Wert holen var wert = localStorage.getItem(schluessel);
var rueck=localStorage[schluessel];
Wert setzen localStorage.setItem(schluessel, wert);
Wert löschen localStorage.removeItem(schluessel);
Alles löschen localStorage.clear();
Anzahl Schlüssel ermitteln var anz=localStorage.length;
Zugriff per Indexnummer var wert=localStorage.key(nummer);
Erkennen von Änderungen if (window.addEventListener) window.addEventListener("storage", aenderung_f, false);
else window.attachEvent("onstorage", aenderung_f);
Storage-Objekt Eigenschaften key, oldValue, newValue, url

Kurzes Beispiel (anfangs leer):

Schlüssel:
Wert:
Andere Seite mit Zugriff auf WebStorage

Wo werden die Daten gespeichert ?
Unter Mozilla Firefox und Windows ist dies im Verzeichnis:
- windows xp c:\\"Dokumente und Einstellungen"\\Benutzer\\Anwendungsdaten\\Mozilla\\Firefox\\Profiles,
- windows 7 C:\Users\Benutzer\AppData\Roaming\Mozilla\Firefox\Profiles
dann darunter ein neues Verzeichnis mit Endung ".default", z.B. 7hfhxdoj.default, und darin die Dateien places.sqlite*, sessionstore.js, webappsstore.sqlite*.

Details zum "Origin"-Prinzip ([SpHa10], Kap. 2.6)

Unter "Origin" versteht man die 3 Werte Protokoll, Rechner, Portnummer, z.B. in "http://www.lima-city.de:8081" dann http:// als Protokoll, www.lima-city.de als Rechner und 8081 als optionale Portnummer. Pro Orgin gibt es hiermit die 5 MB-Grenze an Speicherplatz, ausserdem ist allen Seiten unterhalb des Origins Zugriff gegeben. Da zum Origin kein Pfad gehört, heisst dies, dass die Seite "http://www.test.de/abc/test.html" Zugriff hat auf "http://www.test.de/xyz/test2.html" hat, was nicht immer so gewünscht ist. Insbesondere bei Verwendung von .clear() innerhalb des localStorage-Objektes kann es zu Problemen kommen.
Literatur: [PILG11], Mark Pilgrim, "Durchstarten mit HTML 5", O'Reilly Verlag, 1. Auflage 2011
Internet-Spezifikation: HTML5-Web Storage
[SpHa10], Markus Spiering, Sven Haiges, "HTML 5-Apps für iPhone und Android", Franzis Verlag, 1. Auflage 2010