CSS, HTML und Javascript mit {stil}

WebStorage: LocalStorage, SessionStorage und Datenbanken

Javascript Web Storage

HTML5 bringt neue Speichertechniken als Alternative zu aufwändigen Verfahren wie Cookies.

  • WebStorage: LocalStorage und SessionStorage
  • Datenbanken im Browser des Benutzers: Indexed DB (und Web SQL)

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

Local Storage / Session Storage

LocalStorage und SessionStorage 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 Anwendungen im Vergleich zu Cookies.

webstorage
Local Storage
Nutzlast
5 bis 10MB
max. Lebenszeit
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 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.

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

  • 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.
  • 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 StorageSession StorageIndexed DB
Chrome5531
Firefox3.63.638
IE88ab 10
Opera10.510.532
Safari448
iOS3.23.28.4
Android2.12.14.4

Nutzbarer Web Storage

Zurzeit stehen also nur Local Storage und Session Storage relativ zuverlässig zur Verfügung.

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 natürlich schon 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.