HTML 5 Local Data Storage – Eine kurze Einführung

Apple und Adobe können sich zanken wie sie wollen aber HTML5 wird früher oder später einschlagen wie eine AtomTischbombe.

HTML5 bringt viele neue Features mit sich wie zB. das bessere strukturieren von HTML Seiten mittels neuer Tags, einbinden von Audio Dateien und Videos ohne Flashplayer oder neue Formular Elemente-Typen wie zB. „date“, „email“ oder „number“.
Natürlich sind das noch längst nicht alle Neuerungen die es geben wird. Wer mehr darüber erfahren Möchte kann hier weiterlesen.

Ich möchte in diesem Post etwas näher auf das Feature „Client-side Storage“ eingehen.. auf Deutsch „Datenspeicherung beim Benutzer“.. und damit sind nicht die guten alten Cookies gemeint :)

WTF? Hier ein Bespiel.

Was sind den nun so die Vorteile von „Local Data Storage“? Nun.. das Problem bei Cookies ist erstmal das pro Domain nur 20 Cookies a 4KB angelegt werden können.. was im Härtefall 80KB sind welche bei jeder Abfrage mitgeschickt werden.. 80KB tönt nicht nach viel und ist es auch nicht.. macht bei surfen im Web jedoch einiges aus vor allem in einer Zeit wie jetzt in der wir blitzschnelle Webseiten erwarten.

• Im Gegensatz zu Cookies kann man im Local Storage nicht nur 80KB speichern sondern mehrere Megabytes.
• Die gespeicherten Daten werden nicht wie Cookies immer mitgeschickt sind aber trotzdem immer vorhanden und abrufbar.
• Cookies laufen nach einer bestimmten Zeit ab, lokal gespeicherte Daten aber nicht.
• Mit Local Storage können Webapps wie zB. To-Do Listen, Einkaufszettel, Notizbücher etc. erstellt werden ohne das die Daten auf einem Webserver gespeichert werden sondern beim Benutzer lokal gesichert werden.

Tönt alles ausgezeichnet oder? Es gibt aber auch Nachteile..

Local Storage Varianten

In HTML5 gibt es 3 Möglichkeiten um Daten beim Benutzer zu speichern.

1. Localstorage
2. Sessionstorage
3. Web SQL Database (Werde ich nicht gross darauf eingehen.. Warum steht hier in der grossen roten Box. Ich denke es ist noch zu früh um etwas zu schreiben was auch längere Zeit verhält. Wer aber trotzdem mehr erfahren möchte kann sich die Doku mal ansehen.)

Und jetzt erkläre ich jede der Möglichkeiten mit ein paar Worten…

Local Storage:

Als Localstorage wird Speicherplatz bezeichnet welcher von modernen Browser für die Speicherung von Daten zur Verfügung gestellt wird.
Daten welche im Localstorage abgelegt werden sind ähnlich wie Daten die bis anhin in Cookies gespeichert wurden. Warum? Weil die Daten in Cookies sowie auch im Localstorage im Key/Value Format abgelegt werden was soviel heisst wie das ein Schlüssel genau einen Wert enthalten kann… Ja leider nur einen Wert.. wäre natürlich schön gewesen wenn man ganze Objekte speichern könnte statt nur Strings. (JSON Objekte funktionieren natürlich).

Daten welche im Localstorage abgelegt werden verbleiben da für immer.. ausser man löscht sie mit der dafür vorhandenen Funktion. Man kann also den Browser beenden und neustarten ohne das die Daten im Localstorage verloren gehen.

Localstorage wird pro Domain angelegt und weil die Spezifikation einwenig schwammelig ist unterscheidet sich die Handhabung des Localstorage von Browser zu Browser. Der Firefox Browser blockiert Zugriffe auf den Localstorage sobald die Anfrage nicht von der selben Domain kommt welche die Daten dort abgelegt hat.

Für das speichern, lesen und löschen der Localstorage-Daten gibt es folgende Javascript Funktionen:

• localStorage.setItem(,key‘, ,value‘);
  Speichert einen Wert unter dem angegebenen Schlüssel.
• localStorage.getItem(,key‘);
  Liest den Wert vom angegebenen Schlüssel ein. Existiert dieser nicht so wird „undefined“ zurückgegeben. Alternativ kann auch mit localStorage.key auf die Daten zugegriffen werden.
• localStorage.removeItem(,key‘);
  Entfernt den kompletten Datensatz aus dem Localstorage. Wiederherstellen geht nicht (leider).
• localStorage.clear();
  Löscht alle Daten aus dem Lokalen Speicher welche von der Domain angelegt wurden.

Session Storage:

Sessionstorage unterscheidet sich kaum von Localstorage. die Unterschiede sind lediglich darin, das die gespeicherten Daten nach dem schliessen des Browsers verloren gehen. Sessionstorage verhält sich also sehr ähnlich wie PHP Sessions. 
Verlässt der Besucher die Webseite nach dem Daten im Localstorage abgelegt wurden, so sind diese nicht verloren, sie gehen erst verloren wenn das Browserfenster/Tab geschlossen oder die Seiter verlassen wird (Je nach Browser). Jeder Tab/Browserfenster verwaltet einen eigenen Sessionstorage was zur Folge hat das von einem Fenster nicht auf die Daten in einem Anderen Fenster zugegriffen werden kann was beim Localstorage möglich ist.

Was an Sessionstorage cool ist, ist die Menge der Daten welche gespeichert werden können. Cookies können 4KB Daten speichern, Sessionstorage kann hingegen mehrere MB speichern (Die Menge variiert von Browser zu Browser).

Da sich Sessionstorage kaum vom Localstorage unterscheidet, unterscheiden sich die Javascript Funktionen für den Zugriff auch kaum von einandern.

• sessionStorage.setItem(,key‘, ,value‘);
  Speichert einen Wert unter dem angegebenen Schlüssel.
• sessionStorage.getItem(,key‘);
  Liest den Wert vom angegebenen Schlüssel ein. Existiert dieser nicht so wird „undefined“ zurückgegeben. Alternativ kann auch mit sessionStorage.key auf die Daten zugegriffen werden wie beim Localstorage.
• sessionStorage.removeItem(,key‘);
  Entfernt den kompletten Datensatz aus dem Session Storage. Wiederherstellen geht auch hier nicht.
• sessionStorage.clear();
  Löscht alle Daten aus dem Lokalen Session-Speicher welche von der Domain angelegt wurden.

Beispiel

Hier ein Bespiel (mit jQuery) welches von (fast) allen oben genannten Methoden gebrauch macht.

Fazit (kurz & knapp)

Supertolle, einfachere & schnellere Alternative zu “Old School” Cookies :). Die Möglichkeit mehrere MB’s lokal zu speichern ist einfach fantastisch und sehr nützlich.