Das könnte dich auch interessieren

Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

Entwicklung

HTML5 und Local Storage: Daten für Offlinebetrieb speichern

    HTML5 und Local Storage: Daten für Offlinebetrieb speichern
#FLICKR#

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.

(Foto: John Picken / flickr.com, Lizenz: CC-BY)

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:

Finde einen Job, den du liebst zum Thema Webdesign, Webentwickler

Alle Jobs zum Thema Webdesign, Webentwickler
14 Reaktionen
Axel Freudiger
Axel Freudiger

Du speicherst Daten bei dir lokal im Browser und diese sind nur für diese Domain weit gültig. Führt nun dein Browser Javascript einer anderen Domain aus, kann dieser wieder nur "seinen" localstorage auslesen und bescheiben.
Gäbe es tatsächlich eine "Lücke", wäre dein Browser dafür verantwortlich.

Antworten
micha
micha

1. naja, die frage ist, was man darin dann alles speichert und von der seite wieder auslesen lässt... sehe darin eine angriffsmöglichkeit..

2. und andere können diese nicht auslesen, sicher? google hat da sicher schon die entsprechende "technik" für ^^

der user ist doch nur herr seiner daten, solange der rechner nicht am netz ist, oder? ^^

Antworten
Axel Freudiger
Axel Freudiger

@micha
Zu deinen Fragen:
1. Soll er doch die Daten manipulieren, er beschränkt sich dadurch nur selber in der Funktionalität der Website/Webapp.
2. Die Daten stehen immer nur der Domain zur Verfügung, welche sie anlegt. Sozusagen ein Sandbox-System.
Und natürlich der User selbst, der Herr über seine Daten ist.

Im Grunde ist das ähnlich wie bei Cookies - da werden auch persönliche Informationen gespeichert und der Benutzer kann sie manipulieren wenn er will.

Antworten
micha
micha

das denke ich die ganze zeit:

1. was ist wenn der user die daten manipuliert..
2. wer kann diese daten alles abfragen

Antworten
Axel Freudiger
Axel Freudiger

Von LocalStorage wir allerdings immer häufiger abgeraten. Interessanter Artikel dazu: http://paul.kinlan.me/we-need-to-kill-off-the-localstorage-api/
IndexedDB als Alternative?!

Antworten
phunkei
phunkei

Einige probleme beim webstorage ist, dass man nur String speichern kann. Umgehen kann man das ganze mit JSON. Ich habe ein Plugin geschrieben, welches alles automatisiert für Formulare:
http://www.phunkei.de/blog/2-autostorage-js

Antworten
Irgendjameand
Irgendjameand

@Axel Freudiger Tausend dank.

Antworten
Axel Freudiger
Axel Freudiger

@Irgendjameand Du kannst mit Firebug (Firefox) und Developer Tools (Chrome, Safari) den locale storage anschauen, editieren und löschen.

Chrome/Safari ist einfach. Da gibt es in den Developer Tools einen Reiter "Resources" und dann in der Seitenleiste "Local Storage", bzw. "Lokaler Speicher".

Im Firebug kann man, nach meinem Kenntnisstand, nur über die Konsole darauf zugreifen. Zur Anzeige einfach localStorage eingeben.
Manipulieren mit localStorage.setItem("foo","bar") und delete localstorage['foo'] zum löschen.

Antworten
Irgendjameand
Irgendjameand

Wo genau werden dann die lokalen Daten auf dem Computer gespeichert? Kann ich diese evtl. in einem Notepad öffnen und anschauen?

Antworten
Thomas Quensen

Interessant ist auch, dass localStorage sogar funktioniert, wenn cookies deaktiviert wurden (zumindest im mobile Webkit auf iPhone und Android)

Antworten
Axel Freudiger
Axel Freudiger

Ich setze localStorage regelmäßig ein und speicher/lade eher selten nur einfache Werte, sondern komplette JSON-Objekte mittels

//speichern
localStorage.setItem("myKey", JSON.stringify(myObject));

//laden
JSON.parse(localStorage.getItem("myKey"));

Da würde mich nur mal interessieren, wie sich das Speicherlimit des jeweiligen Browsers äußert! Werde ich ggf. demnächst mal testen...

Antworten
badtwin
badtwin

ich habe localStorage jetzt zum ersten Mal bei einem Projekt eingesetzt um vormals getätigte Auswahlen bei einem neuen Besuch automatisch wiederherzustellen (konkret geht es um die Auswahl von versch. Statistiken; ist n Gimmick das nicht groß weh tut, wenn der Browser kein localStorage unterstützt und man die paar Klicks bei einem neuen Besuch neu tätigen muss)

@plugins für alle: mit den Chrome Dev-Tools kannst du nachschauen und editieren, was sich im localStorage/sessionStorage befindet

Antworten
plugins für alle
plugins für alle

Gibt es Tools oder Plugins um an die Daten dran zu kommen ?
Interessant wären z.B. Produktsuchen bei Local-Storage-Einkaufs-Körben bei MetaSuchmaschinen oder Preisvergleichern durchzuführen.

Man könnte auch sowas wie Ghostery(FireFox-Plugin) für LocalStorage machen und interaktiv sehen ob die Keys mehr oder weniger werden und reinschauen und vielleicht auch (offline-Mode) abändern. Das Online-Shops zu dumm sind, die Daten zu überprüfen und man -999 Waschmaschinen bestellt und das Geld überwiesen kriegt ist eher nicht der Fall, aber das man 9 Waschmaschinen für 0,99 Cent bestellt geht dann vielleicht doch und man kommt damit durch. Weil es keine fertigen Hilfs-Libraries dafür gibt und man alles von Hand zu Fuß und fehlerhaft ständig neu programmiert.

Interessant wäre auch, ohne Javascript dran zu komme. Eine Scriptfreie Version von FORMs mit Offline-Fähigkeit z.b. bei der KFZ-Stelle usw.. Aber Firefox kann sich nicht mal meine Email-Adresse merken und ich muss sie ständig an vielen Stellen selber eintragen.

Antworten
better
better

ein komplett funktionierendes Tutorial wäre nett.. so bringt mir der Artikel so gut wie nichts

Antworten

Melde dich mit deinem t3n-Account an oder fülle die unteren Felder aus.

Abbrechen