smart | Webentwicklung
Alles rund um HTML5, PHP, WordPress & Co.

HTML5 WebStorage API (LocalStorage & SessionStorage)

5. Mai 2013
Stephan
HTML5 Offline-Technologien

Die HTML5 WebStorage API, teilweise auch als DOM Storage bezeichnet, dient der clientseitigen Speicherung von Daten in Form von Schlüssel-Wert-Paaren. Man kann auch vereinfacht sagen, die Daten werden lokal im Webbrowser gespeichert.

Grundsätzlich ist die WebStorage API in die zwei verschiedenen Speicherarten namens LocalStorage und SessionStorage unterteilt.

In diesem Artikel stelle ich euch nun die HTML5 WebStorage API vor.

LocalStorage vs. SessionStorage

LocalStorage dient zur dauerhaften Speicherung von langlebigen Daten. Wohingegen SessionStorage das temporäre Speichern von sitzungsbezogenen und kurzlebigen Daten ermöglicht. Infolgedessen unterscheiden sich beide Speicherarten bzgl. Gültigkeitsdauer- und bereich:

LocalStorageSessionStorage
GültigkeitsdauerDaten bleiben sowohl nach Schließen des Webbrowser-Fensters bzw. Tabs als auch nach Schließen des Webbrowsers erhalten.Daten bleiben nur solange erhalten bis das Fenster bzw. der Tab des Webbrowsers, in dessen Kontext die Daten gespeichert wurden, geschlossen wird.
GültigkeitsbereichDaten sind unabhängig vom Webbrowser-Fenster bzw. Tab verfügbar.Daten sind nur in dem Webbrowser-Fenster bzw. Tab verfügbar, in dessen Kontext die Daten gespeichert wurden.

Im Zusammenhang mit dem Gültigkeitsbereich sei noch erwähnt, dass die WebStorage API der Same Origin Policy (SOP) unterliegt. Konkret bedeutet das, dass eine Webseite mit der Herkunft (Origin) http://www.abc.de:80 keinen Zugriff auf die mittels der WebStorage API gespeicherten Daten einer Webseite mit der Herkunft http://www.xyz.de:80 hat.

Die WebStorage API im Detail

Die synchrone WebStorage API setzt sich zum einen aus dem Storage– und zum anderen aus dem StorageEvent-Interface zusammen. Der eigentliche Zugriff auf den jeweiligen Speicher erfolgt über das globale localStorage bzw. sessionStorage-Objekt, die das Storage-Interface gleichermaßen implementieren.

Das Storage-Interface ist dabei wie folgt definiert:

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

Sowohl für die Schlüssel als auch die einzelnen Werte sind nur Daten vom Typ DOMString zulässig. Wenn ihr also Arrays oder Objekte speichern wollt, müsst ihr diese erst in einen String konvertieren.

Ach ja, und laut Spezifikation gibt es für die WebStorage API ein Speicherlimit von 5MB, wobei das in den verschiedenen Browsern unterschiedlich ist.

Einen Überblick über die Speicherlimits der einzelnen Browser findet hier: Web Storage Support Test

In der folgenden Tabelle sind die einzelnen Attribute bzw. Funktionen kurz erläutert:

Attribut / MethodeBeschreibung
lengthGibt die Anzahl der Schlüssel-Wert-Paare zurück.
key(index)Gibt den Schlüssel an der Position index zurück.
getItem(key)Gibt den Wert für den Schlüssel key zurück.
setItem(key, value)Speichert den Wert value für den Schlüssel key.
removeItem(key)Löscht den mit dem Schlüssel key assoziierten Wert.
clear()Löscht alle Schlüssel-Wert-Paare.

Bei der setItem-Funktion ist es so, dass zuallererst geprüft wird, ob der angegebene Schlüssel bereits existiert. Falls dem nicht so ist, wird der Schlüssel erzeugt und der angegebene Wert gespeichert. Für den Fall, dass der Schlüssel bereits existiert, wird der alte mit dem neuen Wert überschrieben. Weiterhin ist es bei der removeItem-Funktion so, dass neben dem Wert auch der Schlüssel selbst gelöscht wird.

Neben dem eigentlichen Storage-Interface gibt es, wie bereits erwähnt, zusätzlich noch das StorageEvent-Interface. Ein StorageEvent wird ausgelöst, sobald im Speicher eine Änderung registriert wurde. Dadurch besteht die Möglichkeit Race Conditions entgegenzuwirken, indem bei Eintritt eines solchen Events die Daten synchronisiert werden können. Hierfür liefert das entsprechende StorageEvent-Objekt sowohl den Schlüssel als auch den alten sowie neuen Wert des geänderten Schlüssel-Wert-Paares mit.

Die WebStorage API in Aktion

Dank der Einfachheit der WebStorage API benötigen wir nur eine einzelne Zeile Code, um ein Schlüssel-Wert-Paar zu speichern:

localStorage.setItem('name1', 'Tom');

Da es sich bei dem localStorage-Objekt um ein JavaScript-Objekt handelt, können wir auch folgendermaßen Daten speichern:

localStorage.name2 = 'Hans';
localStorage['name3'] = 'Sandra';

Analog zum Speichern können wir genauso einfach die Daten wieder auslesen:

localStorage.getItem('name1');
localStorage.name2;
localStorage['name3'];

Einen einzelnen Datensatz können wir mittels der removeItem-Funktion löschen:

localStorage.removeItem('name1');

Browser-Unterstützung

Die WebStorage API wird in allen gängigen Webbrowsern unterstützt. Eine genaue Auflistung der einzelnen Browsern und den jeweiligen Versionen findet ihr auf caniuse.com.

Vor- & Nachteile

Wie jede API bzw. Technik hat natürlich auch die WebStorage API gewisse Vor- als auch Nachteile:

Vorteile:

  • einfach zu implementierende API
  • einfache Struktur der Daten durch Schlüssel-Wert-Format
  • von allen modernen Webbrowsern unterstützt
  • bietet mehr Speicher als Cookies

Nachteile:

  • synchrone API blockiert UI-Thread bei jedem Lese- und Schreibvorgang
  • keine asynchrone Variante der API vorhanden
  • nicht innerhalb von Worker-Threads nutzbar
  • keine Unterstützung von Transaktionen (wie bei Datenbanksystemen)
  • Speicherlimit mit ca. 5MB relativ gering bemessen
  • nur DOMString als Datentyp unterstützt
  • kein Mechanismus zum Durchsuchen der Daten

Mögliche Anwendungsfälle

Im Folgenden einige mögliche Anwendungsfälle für den Einsatz der WebStorage API:

  • Status der GUI einer Webseite bzw. Webapplikation speichern
  • Spielstatus bei Spielen speichern
  • anwendungs- & benutzerspezifische Einstellungen speichern
  • Web-Service-Anfragen bzw. die erhaltenen Daten cachen, da speziell Web-Services oftmals nur eine begrenzte Anzahl an Zugriffen in einem bestimmten Zeitintervall erlauben
  • generell zum Cachen von Daten, um z.B. Netzwerktraffic einzusparen und Performance einer Webapplikation zu verbessern

Fazit

Die HTML5 WebStorage API eignet sich, wie ich finde hervorragend zum Speichern von Daten kleinerer Größe. Habt ihr also Daten, die nicht notwendigerweise auf dem Server gespeichert werden müssen, wäre WebStorage eine sinnvolle Möglichkeit die Daten clientseitig zu speichern.

Was ich mir aber gewünscht hätte, wäre eine asynchrone API-Variante, wobei die API dann wohl wieder komplexer geworden werden.

Habt ihr die WebStorage API auch schon mal ausprobiert oder verwendet ihr sie sogar schon in bestehenden Projekten?

Kommentare  
3 Kommentare vorhanden
1 JonasB schrieb am 5. Mai 2013 um 14:14 Uhr

Web Storage ist schon eine coole Sache für userspezifische Daten. Gerade bei JavaScript ist das Auslesen von Cookies ja etwas unhandlich. Ich hatte die Local Storage damals bei meinem Sitzplan Maker (http://www.j-breuer.de/blog/13-wochen-projekt-sitzplan-maker-woche-6/) eingesetzt und fand sie sehr praktisch.

Da sogar der IE8 Web Storage zu unterstützten scheint, kann man die sogar fast schon produktiv einsetzen.

2 Stephan L. schrieb am 5. Mai 2013 um 20:45 Uhr

Hallo Jonas,

ja, gegenüber anderen HTML5 Technologien wird WebStorage überaschenderweise wirklich von allen gängigen Webbrowsern unterstützt.

Wenn ich da nur an die IndexedDB API denke, mit der ich mich auch gerade auseindersetze – da ist an Produktiveinsatz noch nicht wirklich zu denken.

Gruß

Stephan

3 Moritz schrieb am 27. März 2014 um 18:57 Uhr

Hi Stephan, hallo an alle Leser 🙂

Ich habe ein kleines Problem; vielleicht könnt ihr mir helfen?
Ich hatte einen Wasserschaden an meiner alten SSD-Festplatte, zum Glück konnte ein Datenrettungsunternehmen nahezu alle Dateien wiederherstellen.

Ich habe eine Festplatte zu geschickt bekommen, und möchte nun unter Benutzer/Appdata/Local/Google/Chrome/UserData/Default/LocalStorage/Chrome-extension.pflphaooapbgpeakohlggbpidpppgdff_0.localstorage meine alten Chrome-Favoriten auslesen.

Wie kann ich aber die .localstorage lesen/leserlich öffnen? Ich habe mir schon Notepad++ runtergeladen, aber wenn ich die Datei damit öffne, sehe ich nur „SQLite format 3 NUL EOT NUL SOH SOH NUL @ NUL NUL NUL ETB NUL NUL NUL ENO NUL…“ usw. usf.

Damit kann ich leider gar nichts anfangen.. Habt ihr vlt. eine Idee, wie ich meine Favoriten einsehen kann? Wäre für jeglichen Input dankbar…

Naja, danke auf jeden Fall,

beste Grüße, Moritz

0 Trackbacks/Pingbacks vorhanden
Du bist herzlich eingeladen auch ein Kommentar zu hinterlassen!
Kommentar schreiben

Vielen Dank für dein Kommentar!