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
19 Antworten
von better 12.12.2011 (12:26Uhr) 1.
ein komplett funktionierendes Tutorial wäre nett.. so bringt mir der Artikel so gut wie nichts
von plugins für alle 12.12.2011 (13:17Uhr) 2.
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.
von badtwin 12.12.2011 (13:46Uhr) 3.
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
von Axel Freudiger 12.12.2011 (16:17Uhr) 4.
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...
von HTML5 und Local Storage: Daten für… 12.12.2011 (18:35Uhr) 5.
[...] 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. Source: t3n.de [...]
von Thomas Quensen 13.12.2011 (16:02Uhr) 6.
Interessant ist auch, dass localStorage sogar funktioniert, wenn cookies deaktiviert wurden (zumindest im mobile Webkit auf iPhone und Android)
von Irgendjameand 13.12.2011 (21:18Uhr) 7.
Wo genau werden dann die lokalen Daten auf dem Computer gespeichert? Kann ich diese evtl. in einem Notepad öffnen und anschauen?
von Axel Freudiger 14.12.2011 (11:11Uhr) 8.
@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.
von t3n-DevLinks: 10 Desktop-Apps für Codes… 14.12.2011 (13:40Uhr) 9.
[...] HTML5 und Local Storage: Daten für Offlinebetrieb speichern - t3n News Dezember 2011 [...]
von Irgendjameand 14.12.2011 (21:56Uhr) 10.
@Axel Freudiger Tausend dank.
von HTML5: Ãœberschriften und Einleitungen v… 20.12.2011 (10:56Uhr) 11.
[...] HTML5 und Local Storage: Daten für Offlinebetrieb speichern [...]
von HTML5: Ãœberschriften und Einleitungen v… 20.12.2011 (10:56Uhr) 12.
[...] HTML5 und Local Storage: Daten für Offlinebetrieb speichern [...]
von HTML5: Eingabefeld mit Vorschlägen als… 05.01.2012 (14:44Uhr) 13.
[...] HTML5 und Local Storage: Daten für Offlinebetrieb speichern [...]
von HTML5 und Local Storage: Daten für Offl… 05.01.2012 (21:57Uhr) 14.
[...] HTML5 und Local Storage: Daten für Offlinebetrieb speichern Adobe ist allem Anschein nach drauf und dran, den Flash-Player für mobile Geräte einzustellen und den Fokus der… von better 12.12.2011 (12:26Uhr) 1. ein komplett funktionierendes Tutorial wäre nett.. so bringt mir der Artikel so gut wie nichts von … Read more on t3n Magazin [...]
von Binary Domain – Vorschau › Domai… 07.01.2012 (02:39Uhr) 15.
[...] HTML5 und Local Storage: Daten für Offlinebetrieb speichern 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 … Read more on t3n Magazin [...]
von Tooltipp: Videos in HTML5 konvertieren Â… 09.01.2012 (16:59Uhr) 16.
[...] HTML5 und Local Storage: Daten für Offlinebetrieb speichern - t3n News [...]
von phunkei 11.01.2012 (16:31Uhr) 17.
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
von HTML5: Pflichtfelder und Eingabevorgaben… 19.01.2012 (14:53Uhr) 18.
[...] HTML5 und Local Storage: Daten für Offlinebetrieb speichern [...]
von Websoftware läuft Offline on-demand 20.01.2012 (12:50Uhr) 19.
[...] t3n über “HTML5 und Local Storage: Daten für Offlinebetrieb speichern” [...]