12.12.2011, 11:16 Uhr Hinweis: Wir haben in diesem Artikel Provisions-Links verwendet und sie durch "*" gekennzeichnet. Erfolgt über diese Links eine Bestellung, erhält t3n.de eine Provision.

Der Browser wird dank HTML5 immer mehr zu einer Umgebung, in der komplexe Anwendungen laufen können, ohne dass auf Plug-ins wie Flash gesetzt werden muss. Mit Local Storage lassen sich Anwendungen auch für den Offlinebetrieb rüsten, indem Daten clientseitig gespeichert werden können.

Local Storage und Cookies

Zwar gibt es mit Cookies bereits eine bewährte Möglichkeit, Daten clientseitig zu speichern und darauf zuzugreifen. Local Storage hat jedoch noch einige Vorteile gegenüber Cookies. Über Cookies lassen sich Daten nur sehr eingeschränkt speichern. Denn die Anzahl und die Größe der Cookies ist limitiert. Nach dem Standard müssen Browser 20 Cookies pro Domain mit einer Größe von 4 Kilobyte (je nach Browser auch mehr) akzeptieren. Gerade komplexe Anwendungen kommen da schnell an die Grenze. Außerdem laufen Cookies nach einer bestimmten Zeit ab, was schnell zu Problemen führen kann, wenn man Daten für eine Anwendung dauerhaft offline speichern möchte.

Bei Local Storage gibt es all diese Einschränkungen nicht. Allerdings unterstützen nur moderne Browser diese Möglichkeit der clientseitigen Speicherung. Neben der dauerhaften Speicherung von Daten gibt es auch bei Local Storage die Möglichkeit, Daten nur temporär zu speichern. Ähnlich wie bei Cookies können auch hier Daten nur für die Dauer einer Sitzung – also bis zum Schließen des Browsers – gespeichert werden.

HTML5 und Local Storage nutzen

Das Speichern von Daten und der Zugriff darauf erfolgt über JavaScript. Es gibt drei Methoden, mit denen Werte gespeichert, abgerufen und gelöscht werden können. Außerdem gibt es eine Methode, mit welcher alle gespeicherten Daten einer Domain gelöscht werden können.

Werte werden mit „localStorage.setItem()“ gespeichert und mit „localStorage.getItem()“ abgerufen. Für jeden gespeicherten Wert wird ein Schlüssel vergeben:

localStorage.setItem("key", "wert");
localStorage.getItem("key");

So lassen sich zum Beispiel Formulareingaben im Local Storage speichern, anstatt sie zu versenden. Dazu wird die Formularverarbeitung einer JavaScript-Funktion übertragen:

<form onsubmit="daten_speichern(); return false">
  <input type="text" name="vorname" />
</form>

Die Funktion „daten_speichern()“ speichert den eingegebenen Wert anschließend im Local Storage:

function daten_speichern() {
  localStorage.setItem("vorname", document.forms[0]["name"].value);
}

Fortan kann der Browser auf den gespeicherten Wert zugreifen und ihn ausgeben. Beim Laden einer Seite können dann im Local Storage gespeicherte Werte abgerufen und ausgegeben werden. Auch dies lässt sich über eine kleine Funktion regeln, die dann zum Beispiel über „onload“ im BODY-Element aufgerufen wird:

function daten_ausgeben() {
  document.getElementById("vorname").firstChild.nodeValue = localStorage.getItem("vorname");
}

Desweiteren lassen sich mit „localStorage.setItem()“ einzelne Werte aus dem Local Storage löschen sowie mit „localStorage.clear()“ alle gespeicherten Daten einer Domain:

localStorage.removeItem("key");
localStorage.clear();

Bei der Verwendung von „localStorage“ bleiben Daten so lange gespeichert, bis sie über eine der beiden genannten Methoden gelöscht werden. Alternativ gibt es noch „sessionStorage“: Hierbei werden Daten nur für die Dauer einer Browsersitzung gespeichert. „sessionStorage“ hat dieselben Methoden wie „localStorage“ zum Speichern und Aberufen von Daten.

Über „localStorage.length“ lässt sich zudem die Anzahl der gespeicherten Werte abfragen.

Alle modernen Browser unterstützen Local Storage.

HTML und LocalStorage für Offlinebetrieb

Gerade für den Offlinebetrieb von Anwendungen bietet sich die Verwendung von Local Storage an. Um festzustellen, ob der Browser derzeitig online oder offline ist, gibt es die Methode „navigator.onLine“. Sie gibt „true“ wieder, wenn eine Internetverbindung vorhanden ist und „false“, wenn keine Verbindung vorhanden ist.

Hierüber lässt sich dann zum Beispiel entscheiden, ob auf Daten im Local Storage nur dann zurückgegriffen werden soll, wenn sich der Browser im Offlinebetrieb befindet.

Nutzt ihr HTML5 und Local Storage oder reichen euch Cookies nach wie vor? Für welche Zwecke setzt ihr Local Storage ein?

Weitereführende Links zum Thema HTML5:

• HTML5: Neue Formulartypen in der Praxis – t3n News
• Popcorn – HTML5-Tool zum Erstellen interaktiver Webvideos – t3n News
• HTML5: Neue Aufgaben für die Elemente SMALL, B und I – t3n News
• Mobile HTML5-Entwicklung für iOS mit mehr Features, dank MobiUs – t3n News
• HTML5: Eigene Attribute für Elemente erstellen – t3n News