HTML5 Local Storage – Verwendung des Web Storage mit Javascript

Dank HTML5 sind viele Neuerungen in die Web-Landschaft eingezogen. Eine praktische z.B. ist der sogenannte „Local Storage“, ein Speicherbereich innerhalb des Browsers den man mit Daten befüllen kann und dadurch sogar offline benutzen kann. Nach dem Key-Value Prinzip können dort mindestens bis zu 5MB an Daten abgelegt werden. Damit wird dieser Speicher für viele kleine Webanwendungen interessant, die auf eine serverseitige Speicherung verzichten können, aber dennoch Daten für den Benutzer ablegen wollen. Glücklicherweise unterstützen alle großen Browser diese Technik schon seit einigen Versionen, sodass man davon ausgehen kann, dass man es mittlerweile ohne größere Probleme auch einsetzen kann.

Grundlagen

Um zu überprüfen ob im aktuellen Browser überhaupt der Local Storage verfügbar ist schaut man einfach, ob ‚Storage‘ definiert ist

1

if(typeof(Storage) === "undefined") {//handle storage not usable}

Um einen Wert zu speichern oder zu ändern gibt es die Funktion ’setItem‘

1

localStorage.setItem('list', listContent);

Das Auslesen gestaltet sich auch erwartbar einfach

1

localStorage.getItem('list');

Auch das Entfernen eines Wertes geht über einen simplen Funktionsaufruf

1

localStorage.removeItem('list');

Das Praktische an dieser Technik ist, dass die Daten auch beim Schließen des Browsers erhalten bleiben und sie nicht von einer Session abhängig sind. Wenn man die Daten loswerden will sollte man in seinem Browser nachsehen, wie man die Lokalen Daten bereinigen kann.

Objekte im Local Storage speichern

Da man leider nur Strings im Local Storage speichern kann, habe ich mir ein kleines Snippet herausgesucht, das den Storage um die Möglichkeit auch Objekte leicht zu speichern erweitert. Dazu wird das Objekt in JSON umgewandelt und beim auslesen wieder zurückgewandelt.

1
2
3
4
5
6
7
8
9

Storage.prototype.setObject = function(key, value) {
    this.setItem(key, JSON.stringify(value));
};
 
Storage.prototype.getObject = function(key) {
    var value = this.getItem(key);
 
    return value && JSON.parse(value);
};

Quelle: http://stackoverflow.com/a/3146971

Anwendungsbeispiel

Da ich das das Prinzip auch mal sinnvoll anwenden wollte, habe ich eine kleine Einkaufsliste gebaut, die man vorzugsweise auf seinem Handy benutzen kann, um sich dort schnell zu notieren was man später noch aus dem Laden mitbringen wollte.

shopping-list

Live Demo: Shopping-List

Für Interessierte findet sich der Quellcode auf Bitbucket: https://bitbucket.org/renevorndran/shopping-list