HTML5: Web Storage (Local und Session Storage)

Mit den DOM-Objekten localStorage und sessionStorage serviert HTML5 uns eine wunderbare Alternative zu den bisherigen Cookies. Zunächst werden die Daten dadurch nicht mehr bei jedem Request vollständig mitgesendet, was so manche Kopfschmerzen bei der Performance-Optimierung von Webseiten ersparen sollte. Außerdem werden die Begrenzungen von Cookies aufgehoben, denn via Web Storage können abhängig vom Limit des Browsers mehrere Megabyte Daten gespeichert werden. In diesem Artikel stelle ich die neuen Möglichkeiten vor, die übrigens von allen modernen Browsern inkl. dem Internet Explorer 8 unterstützt werden, vor.

Local oder Session?

Zunächst zum Unterschied zwischen localStorage und sessionStorage: Die Daten werden in der local-Variante quasi dauerhaft auf der Clientseite gespeichert, d.h. sie verbleiben auch, wenn der Browser geschlossen wird. Sie können nur durch die Webseite selbst oder natürlich durch den Nutzer gelöscht werden. Vergessen darf man dabei aber nicht, dass die clientseitige Speicherung vom System und vom Browser abhängig ist. Verwendet der Benutzer einen anderen Browser oder einen anderen Rechner, kann er nicht auf die Daten zugreifen, sofern sie nicht auch serverseitig abgelegt wurden. Kurzlebiger ist hingegen die session-Variante, da sie lediglich an die aktuelle Browsersession gebunden ist. Demnach werden die Daten gelöscht, sobald der Browser (ggf. auch nur Fenster/Tab, je nachdem ob der Browser diese als eigenständige Session sieht) geschlossen wird.

Verwendung

Die Benutzung beider Varianten ist identisch, da sie jeweils das Storage-Interface verwenden:

var cnt = localStorage.length;
localStorage.key(n);
localStorage.getItem(key);
localStorage.setItem(key,data);
localStorage.removeItem(key);
localStorage.clear();
/* bzw. */
var cnt = sessionStorage.length;
sessionStorage.key(n);
sessionStorage.getItem(key);
sessionStorage.setItem(key,data);
sessionStorage.removeItem(key);
sessionStorage.clear();

Attribute und Funktionen

Das length-Attribut und die Funktionen im Überblick:

Attribut length: Enthält die Anzahl der gespeicherten Elemente.
Funktion key(n): Gibt den Namen des n-ten Keys zurück. So können zusammen mit length auch Datensätze unbekannter Größe durchlaufen werden.
Funktion getItem(key): Liefert den Wert zum Schlüssel key.
Funktion setItem(key, value): Legt den Wert value unter dem Schlüssel key ab.
Funktion removeItem(key): Löscht den Wert zum Schlüssel key.
Funktion clear(): Löscht alle gespeicherten Daten.

Beispiel

Eine kleine Web Storage Demo habe ich natürlich auch vorbereitet. Hier der Quelltext des JavaScript-Teils:

/* Als obj wird entsprechend sessionStorage
   oder localStorage uebergeben. */

function fullclear(obj) {
   obj.clear();
   buildTables();
}

function save(obj) {
   var
      key = document.getElementById('key'),
      value = document.getElementById('value');
   obj.setItem(key.value, htmlEncode(value.value));
   buildTables();
   key.value = value.value = '';
}

function buildTables() {
   buildTable(sessionStorage, 'session');
   buildTable(localStorage, 'local');
}

function remove(obj, key) {
   obj.removeItem(key);
   buildTables();
}

function buildTable(obj, id) {
   var 
      cnt = obj.length,
      e = document.getElementById(id),
      iHTML = '',
      key = '';
   for (i = 0; i < cnt; i++) {
      key = obj.key(i);
      iHTML += '' + key + '' + obj.getItem(key) + '\n';
   }
   e.innerHTML = iHTML;
}

function htmlEncode(value){
   var 
      text = document.createTextNode(value),
      e = document.createElement('div');
   e.appendChild(text);
   return e.innerHTML;
}

Objekte speichern

Leider können auch hier, wie bei Cookies, nur Strings gespeichert werden. Hier kann man sich aber mit JSON helfen:

1. Objekt value in key speichern:

localStorage.setItem(key, JSON.stringify(value));

2. Objekt aus key laden:

var value = JSON.parse(localStorage.getItem(key));