Anzeige
Anzeige
Reportage

HTML5 und Local Storage: Daten für Offlinebetrieb speichern

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.

Von Denis Potschien
3 Min.
Artikel merken
Anzeige
Anzeige
(Foto: John Picken / flickr.com, Lizenz: CC-BY)

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.

Anzeige
Anzeige

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.

Anzeige
Anzeige

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

Anzeige
Anzeige
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:

html linenums"><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:

Anzeige
Anzeige
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.

Anzeige
Anzeige

Ü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.

Anzeige
Anzeige

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: Eigene Attribute für Elemente erstellen

Fast fertig!

Bitte klicke auf den Link in der Bestätigungsmail, um deine Anmeldung abzuschließen.

Du willst noch weitere Infos zum Newsletter? Jetzt mehr erfahren

Anzeige
Anzeige
Kommentare (30)

Community-Richtlinien

better

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

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.

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

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…

Thomas Quensen

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

Irgendjameand

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

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.

Irgendjameand

@Axel Freudiger Tausend dank.

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

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?!

micha

das denke ich die ganze zeit:

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

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.

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? ^^

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.

Bitte schalte deinen Adblocker für t3n.de aus!
Hallo und herzlich willkommen bei t3n!

Bitte schalte deinen Adblocker für t3n.de aus, um diesen Artikel zu lesen.

Wir sind ein unabhängiger Publisher mit einem Team von mehr als 75 fantastischen Menschen, aber ohne riesigen Konzern im Rücken. Banner und ähnliche Werbemittel sind für unsere Finanzierung sehr wichtig.

Schon jetzt und im Namen der gesamten t3n-Crew: vielen Dank für deine Unterstützung! 🙌

Deine t3n-Crew

Anleitung zur Deaktivierung
Artikel merken

Bitte melde dich an, um diesen Artikel in deiner persönlichen Merkliste auf t3n zu speichern.

Jetzt registrieren und merken

Du hast schon einen t3n-Account? Hier anmelden

oder
Auf Mastodon teilen

Gib die URL deiner Mastodon-Instanz ein, um den Artikel zu teilen.

Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

Kommentar abgeben

Melde dich an, um Kommentare schreiben und mit anderen Leser:innen und unseren Autor:innen diskutieren zu können.

Anmelden und kommentieren

Du hast noch keinen t3n-Account? Hier registrieren

Anzeige
Anzeige