Offline – damit eine App in jedem Winkel der Welt funktioniert - Apps mit HTML5 und CSS3: Fur iPad, iPhone und Android - page 274

7.2 localStorage, die Offline-Datenbank
In regulären Programmen werden auch immer Daten gespeichert, die der Nutzer ein-
gibt bzw. generiert. Bei WebApps passiert dies in der Regel in einer Datenbank auf
einem Webserver, z. B. mit MySQL. Der große Nachteil: Das Speichern und Auslesen
der Datenbank funktioniert nur bei bestehender Online-Verbindung, außerdem wird
zusätzlicher Traffic erzeugt.
Es müsste also möglich sein, Daten aus der WebApp auf dem Gerät speichern zu kön-
nen. Hierfür gibt es in HTML5 das localStorage -Objekt, den sogenannten lokalen
Speicher . Die WebApp kann in ihm Daten speichern und auslesen - völlig ohne
Online-Verbindung. Der Clou: Die gespeicherten Daten bleiben selbst dann erhalten,
wenn Sie die WebApp beenden oder das Smartphone ausschalten. Löschen muss der
Nutzer die Daten schon selbst, entweder über die Systemeinstellungen oder über
eine Funktion in der WebApp.
Der localStorage wird über JavaScript angesprochen. Alle Daten werden dabei, ähn-
lich wie in einem JSON-Objekt, als Wertepaare gespeichert: Es gibt einen Schlüssel
und einen Werteinhalt. Der Schlüssel dient dazu, den Eintrag zu identifizieren und
sollte daher eindeutig sein.
7.2.1 localStorage-Funktionen
Das Speichern und Auslesen von Daten im localStorage erfolgt über JavaScript-Funk-
tionen, die per Punktnotation auf dem localStorage -Objekt aufgerufen werden. Der
Funktionssatz ist recht übersichtlich, es gibt lediglich vier Methoden:
localStorage.setItem(schluessel, wert);
Die Funktion .setItem speichert ein Element im localStorage ab. Sie erwartet zwei
Parameter: Den Schlüssel, über den der Eintrag später identifiziert wird, und einen
Wert. Dies ist im Normalfall der Inhalt einer JavaScript-Variablen, also eine Zei-
chenkette, eine Zahl oder auch ein Objekt.
localStorage.getItem(schluessel);
Mit dieser Funktion lesen Sie einen Eintrag aus dem localStorage aus. Dazu müs-
sen Sie den entsprechenden Schlüssel kennen und diesen als Parameter an die
Funktion übergeben. Die Funktion gibt Ihnen dann den zugehörigen Wert zurück.
Das Gleiche erreichen Sie übrigens auch mit localeStorage[schluessel] - ähnlich
zum Auslesen eines Arrays.
localStorage.removeItem(schluessel);
Mit .removeItem löschen Sie Einträge aus dem localStorage . Übergeben Sie der
Funktion dazu den Schlüssel als Parameter. Sobald ein Eintrag gelöscht ist, können
Sie ihn nicht mehr wiederherstellen.