CSS, HTML und Javascript mit {stil}

WebStorage: Local Storage, Session Storage und Datenbanken

Vergleich und Übersicht über die Speichertechniken 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 Verfahren wie Cookies darstellen.

  • WebStorage: LocalStorage und SessionStorage
  • Datenbanken im Browser des Benutzers: Indexed DB

HTML-Seiten haben kein Gedächtnis: Sie sind zustandslos. Web Storage 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 / Session Storage

Local Storage und Session Storage sind als legitime Nachfolger von 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.

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
Session Storage
Nutzlast
5 bis 10MB
max. Lebenszeit
bis Seite geschlossen wird
Geltungsbereich
ein individuelles Browerfenster / Tab
Cookies
Nutzlast
mind. 4KB
max. Lebenszeit
praktisch unbegrenzt
Geltungsbereich
Alle Browserfenster / Tabs

Datenbank im Browser

Neben Local Storage und Session Storage hat HTML5 zwei einfache Datenbanken im Browser vorgesehen.

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.

HTML5 hat darum zwei einfache Datenbank-Schemata vorgesehen: Indexed DB und Web SQL. Web SQL (nur Chrome, Safari und Opera, nicht Firefox und nicht IE / EGDE) wurde eingefroren, weil es die einzige quelloffene relationale Datenbank ist. Nur das schlichter gestrickte Indexed DB ist zurzeit in allen modernen Browsern verfügbar – IE ab Version 10.

Indexed DB basiert auf einem Schlüssel/Wert-Modell und ist nicht relational.

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

Local Storage, Session Storage und Indexed DB werden von allen modernen Browsern unterstützt.

Local StorageSession StorageIndexed DB
Chrome5531
Firefox3.63.638
IE88ab 10
Opera10.510.532
Safari448
iOS3.23.28.4
Android2.12.14.4

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 ein Ersatz für Cookies in relativ einfachen Anwendungen.

Für größere Anwendungen unterstützen alle modernen Browser heute auch Indexed DB – selbst IE 10 hatte bereits Indexed DB integriert.

Web Storage