HTML5 localStorage

Problem

Daten sollen Client-seitig (auf dem Rechner des Nutzers) persistent abgelegt werden. Dies können zum Beispiel Einstellungsdaten sein oder Daten, die es dem Nutzer ermöglichen, auch offline ohne Datenverlust weiterzuarbeiten.

Lösung

Häufig werden solche Daten in Cookies (kleine Textdateien) abgelegt, die bei jedem Aufruf mitgesendet werden. HTML5 bietet mit dem localStorage-Objekt das Speichern nativ direkt im Browser an. Das bedeutet aber auch, dass jeder Browser auf dem Rechner des Nutzers seinen eigenen localStorage hat. Außerdem soll es aus Sicherheitsgründen für jede Domain ein eigenes Objekt geben, dass ausschließlich von dieser Domain manipuliert werden kann.

Der localStorage ist als weiteres Attribut des window-Objects definiert. Innerhalb eines Dokuments kann per localStorage darauf zugegriffen werden.

Die Daten werden als Key-Value-Paare (Name-Wert-Paare) gespeichert. Name und Wert sind dabei reiner Text. Natürlich kann man als Wert auch beispielsweise '{"color": "blue", "hobby": "football"}' speichern und diesen String später mit JSON.parse() zurück in ein Objekt wandeln.

Folgende Methoden und Attribute sind interessant:

Methode/Attribut Beschreibung
localStorage.setItem(key, value) Speichert einen Wert value unter dem Namen key ab.
localStorage.getItem(key) Holt den Wert zum Namen key.
localStorage.removeItem(key) Löscht das Key-Value-Paar zum Namen key.
localStorage.clear() Löscht alle Key-Value-Paare des localStorage der Domain.
localStorage.length Die Anzahl der gespeicherten Key-Value-Paare.

Der Vollständigkeit halber: Es gibt auch ein sessionStorage-Objekt. Dieses funktioniert grundsätzlich genauso wie der localStorage, speichert die Daten aber nur bis zum Beenden der Session (Fenster/Tab schließen).

Beispiel

// Den Wert 'blue' unter dem Namen 'color' abspeichern
localStorage.setItem('color', 'blue');

// Den Wert 'football' unter dem Namen 'hobby' abspeichern
localStorage.setItem('hobby', 'football');
 
// Einen neuen Wert 'red' für 'color' setzen
localStorage.setItem('color', 'red');
 
// Die Anzahl der Einträge im localStorage ausgeben
alert(localStorage.length);
 
// 'hobby' samt Wert löschen
localStorage.removeItem('hobby');
 
// Alle Einträge im localStorage löschen
localStorage.clear();

Demo ansehen

Mehr Infos