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

Dieser Beitrag wurde unter Apps programmieren abgelegt und mit , , verschlagwortet. Setze ein Lesezeichen auf den Permalink.

5 Antworten auf 8. Offline Datenspeicherung per localStorage

  1. Ein Besucher sagt:

    Das scheint ja vorläufig der letzte Teil der Tutorials zu sein.
    Bis hierhin war eigentlich alles sehr gut, allerdings wäre es schön, wenn es auch eine Erklärung für PHP-Grundlagen (z.B. Formulare) gäbe.
    Alleine mit HTML und CSS bringt eine app ja leider relativ wenig, da es keine Programmiersprachen sind. 😉

    • admin sagt:

      PHP ist eine Sprache, die auf dem Server ausgeführt wird und vor Zustellung einer Website an den Client dynamisch den Inhalt parst. Eine App zeichnet sich ja aber unter anderem dadurch aus, dass Sie unabhängig von einer Netzwerkverbindung auf dem Endgerät läuft.
      Im Zusammenhang mit Apps benötigt man PHP nur als „Gegenspieler“ bei dynamischen Inhalten, wenn also ein User selbst Content beisteuern soll, wird diese z.B. per Formular (reines HTML oder JavaScript) an den Server geschickt. Dort kann sich dann ein PHP Script um die weiteren Details kümmern. Eine statische App wie hier besprochen braucht jedoch keinerlei PHP.

  2. Besucher sagt:

    Hallo !
    nettes Tutorial. Macht sicher eine Menge Arbeit. Trotzdem frage ich mal vorsichtig an, ob auch die Datenspeicherung in einer local SQL db noch behandelt werden wird ? Immerhin schreibst du darüber.

    • admin sagt:

      Ja, es ist schon so, dass es recht viel Zeit braucht, das verständlich auf’s digitale Papier zu birngen, aber diesen Monat sollte es noch klappen mit dem Kapitel zur Speicherung einer lokalen Datenbank auf dem mobilen Endgerät.

  3. Maria sagt:

    Hallo und vielen Dank für das verständliche Tutorial!
    Ich beschäftige mich erst seit kurzem mit dem Erstellen von WebApps und freue mich auch eine Vortsetzung dieser Reihe!
    LG Maria

Schreib einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *