Web Storage: Local Storage, Session Storage und IndexedDB

Javascript Local Storage, Session Storage und Cookies

Web Storage ist ein Sammelbegriff für Techniken, die Informationen im Browser des Benutzers speichern und Alternativen zu aufwändigen und veralteten Verfahren wie Cookies darstellen.

23-02-02 SITEMAP CSS HTML JS Basis JS Web Tutorial SVG

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 und Cookies im Browser
Grafische Darstellung des Unterschieds zwischen Local Storage, Session Storage und Cookies
Local Storage
Nutzlast
5 bis 10MB
max. Lebenszeit
praktisch unbegrenzt
Geltungsbereich
Alle Browserfenster / Tabs
Wird nur von Javascript oder Löschen des Browser-Cache gelöscht
Session Storage
Nutzlast
5 bis 10MB
max. Lebenszeit
bis Seite geschlossen wird
Geltungsbereich
ein individuelles Browerfenster / Tab
Wird beim Schließen des Browserfensters automatisch gelöscht
Cookies
Nutzlast
mind. 4KB
max. Lebenszeit
praktisch unbegrenzt
Geltungsbereich
Alle Browserfenster / Tabs
Haltbarkeitsdatum wird bei der Erzeugung des Cookies festgelegt

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.

dot 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.