Web Storage: Local Storage, Session Storage 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.

Local Storage und Session Storage 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 WebStorage der einzige Unterschied zwischen beiden Techniken. Beides arbeitet 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 – ein Vorname oder Nickname, Einstellungen zum Erscheinungsbild der Seite (Farben, Hintergrund, Sprache).

Wenn die 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

Local Storage und Session Storage 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 Local Storage und Session Storage in Hinsicht auf Komfort und Größe überlegen sind.

Indexed DB ist eine einfache Datenbank und in allen aktuellen Browsern verfügbar (IE ab Version 10). Einfach, denn Indexed DB basiert auf einem Schlüssel/Wert-Modell, ist nicht relational und unterstützt kein SQL.

Nun ist das Setzen und Lesen von Cookies mit Javascript zwar recht einfach, aber Cookies können nur kleine unsensible Informationen speichern. Hinter den Cookies von Anwendungen steckt obendrein fast immer noch ein Zugriff auf die Datenbank – erst hier findet die Anwendung die relevanten Daten vor.

• Informationen des Web Storage (der Sammelbegriff für Local Storage, Session Storage und Indexed DB) werden nicht wie Cookies auf den Server übertragen, sondern auf dem System des Benutzers gespeichert.
• Während die Nutzlast des Cookies auf 4 KB beschränkt ist, können Web Storage und Indexed DB 5 bis 10 MB zur Verfügung stellen. Das reduziert die Last auf den Internetverbindungen und greift nicht auf das Datenvolumen der mobilen Geräte zu.
• Web Storage speichert Daten sicher im Browser des Benutzers und überträgt sie nicht wie Cookies unverschlüsselt über das Internet.

Browser-Unterstützung

Session Storage und Local Storage werden von IE8, Firefox ab 3.6, Opera ab 10.5, Chrome ab Version 5, Safari ab Version 4, iOS ab 3.2 und Android ab 2.1 unterstützt.

Das ist eine breite Basis – aber Local Storage und Session Storage 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 alle modernen Browser heute auch IndexedDB – selbst IE10 hatte bereits Indexed DB integriert.