Web Storage: LocalStorage, SessionStorage und IndexedDB

LocalStorage / SessionStorage

HTML-Seiten haben kein Gedächtnis: Sie sind zustandslos. WebStorage verleiht Webseiten ein Gedächtnis über mehrere Seiten und auch für lange Zeit und bietet dafür mehr Platz im Browser des Benutzers als Cookies.

localStorage und sessionStorage sind als Alternativen zu Cookies im Browser integriert. Sie speichern, ändern und löschen Daten, auch wenn die Anwendung nicht online durchgeführt wird. Das garantiert eine schnellere Verarbeitung und erleichtert die Programmierung von browserbasierten Anwendungen im Vergleich zu Cookies.

WebStorage-API – die Benutzerschnittstelle

Im Grunde genommen ist die Lebenszeit von sessionStorage und localStorage der einzige Unterschied zwischen beiden Techniken. Beide arbeiten mit einfachen Schlüssel-/Wertpaaren und kennen weder Objekte noch Arrays.

localStorage.setItem ("color", "blue");

localStorage.getItem("color");

localStorage.removeItem("color");

localStorage.clear();

localStorage wird z.B. für Informationen verwendet, die nicht privater Natur sind, z.B. Einstellungen zum Erscheinungsbild der Seite wie Farben, Hintergrund und Sprache.

Wenn sensible Daten verarbeitet werden – etwa bei einem Shopping Cart – kommt SessionStorage zur Anwendung. Diese Daten löscht der Browser, sobald die Seite geschlossen wird.

Datenbank im Browser

localStorage und sessionStorage basieren genauso wie Cookies auf einfacher String-Verarbeitung. Es gibt keine Queries (Abfragen) und die Behandlung größerer Datensätze ist schnell ineffizient, auch wenn localStorage und sessionStorage in Hinsicht auf Komfort und Größe überlegen sind.

IndexedDB ist eine einfache Datenbank und in allen Browsern verfügbar. Einfach, denn IndexedDB basiert auf einem Schlüssel/Wert-Modell, ist nicht relational und unterstützt kein SQL. Aber die indexierte Datenbank im Browser fasst große Speichermengen, kann Objekte und sogar Blobs speichern.

Nun ist das Setzen und Lesen von Cookies mit Javascript zwar recht einfach, das Auslesen hingegen String-Verarbeitung auf tiefstem Niveau. Hinter den Cookies von Anwendungen steckt obendrein fast immer noch ein Zugriff auf die Datenbank – erst hier findet die Anwendung die relevanten Daten vor.

Während die Nutzlast des Cookies auf 4 KB beschränkt ist, stellen WebStorage und IndexedDB 5 bis 10 MB zur Verfügung. Das reduziert die Last auf den Internetverbindungen und greift weniger auf das Datenvolumen der mobilen Geräte zu.

Browser-Unterstützung

sessionStorage und localStorage werden von allen Browsern unterstützt, aber localStorage und sessionStorage sind nicht für große Datenmengen und komplexe Zusammenhänge gedacht, sondern sind eine Alternative zu Cookies in relativ einfachen Anwendungen.

Für größere Anwendungen unterstützen die Browser heute IndexedDB, um 50MB bis zu mehreren Gigabyte zu speichern, abhängig vom Gerät und vom Speichervolumen des Geräts.