HTML5: Client-side storage
Mit HTML5 kommen viele tolle Sachen auf einen Webentwickler zu. Mit dem <video> und <audio> Tag sollen beispielsweise Videos und Audiodateien direkt im Browser abspielbar sein. Ohne Flash oder andere Technologien. Das Video/die Audiodatei muss natürlich in einem vom Browser unterstützten Codec vorliegen, sonst bleibts still im Browserfenster.
In diesem Artikel soll es aber um die Möglichkeit gehen über die DOM Storage API, Daten auf der Clientseite abzulegen um eine Website auch offline nutzbar zu machen.
sessionStorage
Mit sessionStorage lassen sich auf Key/Value Basis Daten auf dem Client ablegen. Die Daten sind nicht dauerhaft gespeichert, sondern nur solange, bis das Browserfenster geschlossen wird. Wichtig zu wissen: Diese Daten stehen jedem Tab im Browser zur Verfügung! Das macht es zwar einfach, eine Anwendung über mehrere Tabs laufen zu lassen, birgt aber für den Benutzer bei genauer Betrachtung ein Sicherheitsrisiko. Hier geht es noch nichtmal darum, das andere Tabs den Inhalt auslesen können, sie könnten aber genausogut deren Inhalt ändern und dem Beutzer so unter Umständen Schadcode unterschieben. Vorraussetzung ist natürlich das der “Angreifer” die Keys der abgelegten Daten kennt. Aber trotzdem sollten sensible Daten lieber nicht mit sessionStorage gespeichert werden, auch wenn diese beim beenden des Browsers gelöscht werden.
localStorage
localStorage ermöglicht es ebenfalls ein Key/Value Pair im Browser abzulegen, der kleine Unterschied, die Daten werden nicht gelöscht wenn das Browserfenster geschlossen wird und sie werden auf Domain-Basis abgelegt – somit ergibt sich das “Sicherheitsrisiko” von sessionStorage in diesem Falle nicht. Ein weiteres Mank von session- / localStorage ist, das es keine Möglichkeit gibt Objekte abzulegen. Einzig und allein Strings können mit diesen Methoden gespeichert werden.
Database Storage
Das ist mein persönlicher Liebling! Mit Database Storage hat man die Möglichkeit eine SQLite Datenbank im Browser per Javascript zu erstellen, mit Daten zu befüllen, diese zu ändern und dergleichen. Jeder der also schon mit einer SQL-Datenbank zu tun hatte, wird hier eine einfache Möglichkeit finden, Daten strukturierter als mit localStorage/sessionStorage abzulegen. Die Abfrage erfolgt über einfache SQL-Queries. Welche Queries unterstützt werden, lest ihr am besten in der SQLite-Dokumentation nach.
Unterstützung durch die Browser
Die wunderbarste Technik im Web ist nichts ohne die Unterstützung durch gängige Browser. Hier eine kleine Übersicht, welcher Browser was unterstützt:
| sessionStorage | localStorage | DB Storage | |
|---|---|---|---|
| IE | 8.0+ | 8.0+ | - |
| Safari (PC/Mac) | 4.0+ | 4.0+ | 4.0+ |
| Chrome | 5.0+ | 4.0+ | 4.0+ |
| Firefox | 3.0+ | 3.5+ | - |
| Opera | 10.5+ | 10.5+ | 10.5+ |
| iOS | ? | 2.0+ | 2.0+ |
| Android | ? | 2.0+ | - |
Beispiele sessionStorage/localStorage
Nachdem wir die einzelnen Möglichkeiten abgeklopft haben, hier noch ein wenig Beispielcode.
// Element mit dem Key 'foo' und Wert 'bar' anlegen
sessionStorage.setItem("foo", "bar")
localStorage.setItem("foo", "bar");
// Wert des Elements mit dem Key 'foo' aus dem Speicher holen
sessionStorage.getItem("foo");
localStorage.getItem("foo");
// Element mit dem Key 'foo' löschen
sessionStorage.removeItem("foo");
localStorageStorage.removeItem("foo");
Beispiele Database Storage
Und jetzt noch für alle SQL-Liebhaber:
// Datenbank öffnen - Name der Datenbank, Version, Anzeigename, Größe in Bytes (hier z.B. 5MB)
var db = openDatabase("meinedb", 1, "meinedb", 2 * 1024 * 1024);
// Einen SQL-Query ausführen
db.transaction(function(tx){
tx.executeSql("CREATE TABLE users (id INTEGER PRIMARY KEY AUTOINCREMENT NOT NULL, username VARCHAR, passwort VARCHAR)", [], function(tx, result){ alert('Tabelle wurde erstellt!'); }, function(tx.error){ alert("Da ist was schiefgelaufen: " + error.message)});
});
So, das soll es fürs Erste gewesen sein. Einen tiefergehenden Artikel zu Database Storage folgt demnächst. Versprochen 
Wer nicht solange warten möchte, kann sich auf diesen Seiten nährer Informationen zu den hier angesprochenen Themen holen:
Local Storage @diveintohtml5.org
Safari Client-Side Storage and Offline Applications Programming Guide @apple.com
