8. Offline Datenspeicherung per localStorage

Einsetzbar ab FireFox 3.5, Safari 4, Internet Explorer 8 und Chrome

Wenn man in einer Web-Anwendung Daten dauerhaft speichern will, löst man dies auf dem Server in einer Datenbank.  Um die Daten an den Server schicken zu können, ist jedoch eine Internetverbindung notwendig.

Apps sollten jedoch grundsätzlich Daten jederzeit an jedem Ort und ohne online zu sein, speichern können.
Für den Programmierer von Web Apps gab es da bisher nur die Möglichkeit, das über Cookies zu erledigen, was allerdings große Einschränkungen in Bezug auf Datenmenge und Sicherheit aufwies. Mit HTML5 ist es möglich, Daten „Client-Side“ also auf dem Endgerät auch offline zu speichern.

Zur Offline Speicherung von Daten einer Web App gibt es grundsätzlich zwei Möglichkeiten:

1. localStorage und sessionStorage
2. SQL Database Storage

Während erstgenannte Optionen der lokalen Speicherung den bisherigen Möglichkeiten der Cookie Speicherung ähnlich sind, ist die Offline-Speicherung der Daten in einer SQL Datenbank auf dem Endgerät revolutionär. Damit wird es möglich, Daten relativ sicher, dauerhaft und in großem Umfang zu speichern, ohne dass dafür eine Internetverbindung bestehen muss.

Beschäftigen wir uns zunächst mit der einfacheren Methode, dem localStorage:

Daten per localStorage offline speichern

Wie erwähnt, funktioniert der localStorage wie Cookies: man speichert im Browser-Cache ein Wertepaar (key/value). Dieses Wertepaar steht daraufhin allen Seiten dieser Domain zur Verfügung und wird mit dem Schließen des Browserfensters nicht gelöscht.

Die Arbeit mit dem localStorage ist dabei denkbar einfach:

1. Speichern von Daten im localStorage

localStorage.setItem('name', 'selfhtml5');

2. Laden von Daten aus dem localStorage

var name = localStorage.getItem('name');

3. Löschen des lokalen Speichers

localStorage.clear();

Zum selfHTML5 Funktionsbeispiel localStorage

Unterschiede localStorage und sessionStorage

Alles, was localStorage dauerhaft speichert, wird bei sessionStorage nur für die Dauer der Sitzung hinterlegt und geht beim Schließen des Browsers verloren.

Wie lange hält der localStorage?

Die Speicherdauer der Daten im localStorage ist grundsätzlich nicht beschränkt. Die W3C Vorgabe an Browser ist, die Daten so lange als möglich zu erhalten, lediglich wenn der Platz zur Neige geht, oder der User die Daten ausdrücklich löschen möchte, soll dies geschehen:

User agents should expire data from the local storage areas only for security reasons or when requested to do so by the user. User agents should always avoid deleting data while a script that could access that data is running. Quelle: W3C localStorage