Verwendung von localStorage - praktisches Beispiel
Im Folgenden sind die wesentlichen Schritte anhand eines Formulars (Vorname / Nachname) aufgezeigt, um in den localStorage zu schreiben und um Daten wieder heraus zu lesen. Das komplette lauffähige localStorage-Beispiel ist natürlich auf dieser Website hinterlegt und kann getestet oder am Ende dieser Webseite heruntergeladen werden.
Hinweis:
Wenn Sie localStorage durch sessionStorage ersetzen, funktioniert das gleiche Beispiel auch als Session-Storage.
Session-Storage bedeutet, dass die Daten solange im Browser vorgehalten werden, bis die Session beendet wird - üblicherweise durch das Schliessen des Browsers.
Check, ob der Browser localStorage-fähig ist:
Zuerst ist ein Check empfehlenswert (Feature Detection), mit dem ermittelt wird, ob der Browser überhaupt localStorage-fähig ist. Verzichtet man auf den Test und der Browser ist nicht localStorage-fähig, so wird ein Javascript-Fehler das Ergebnis sein.
if(typeof(Storage) !== "undefined" && window['localStorage'] != null ) {
return true;
} else {
return false;
}
}
Speichern von Daten im localStorage:
Im LocalStorage werden die Informationen als key / value-Paare gespeichert, d.h. als Zeichenkette (String). Um auch komplexere Daten (Objekte) speichern zu können, müssen die Daten vor dem Speichern in Strings umgewandelt werden (z.B. als JSON string). Im folgenden Beispiel werden die Formularinformationen Vorname und Nachname sowohl als einfacher String, als auch als Objekt gespeichert. Die Objekt-Variante soll nur die Syntax demonstrieren, wie mit komplexeren Strukturen umgegangen werden muss.
function saveInLocalStorage() {
if(hasLocalStorage()) {
window.localStorage.setItem('Vorname',document.getElementById('Vorname').value);
window.localStorage.setItem('Nachname',document.getElementById('Nachname').value);
oPerson.Vorname = document.getElementById('Vorname').value;
oPerson.Nachname = document.getElementById('Nachname').value;
window.localStorage.setItem('oPerson',JSON.stringify(oPerson));
}
}
Lesen von Daten aus dem localStorage:
Beim Lesen von einfachen Werten muss geprüft werden, ob der Wert im localStorage vorhanden ist, bevor er gelesen wird.
if(hasLocalStorage()) {
if (window.localStorage.getItem("Vorname") !== null) {
document.getElementById('Vorname').value = window.localStorage.getItem('Vorname');
}
if (window.localStorage.getItem("Nachname") !== null) {
document.getElementById('Nachname').value = window.localStorage.getItem('Nachname');
}
}
}
Falls komplexere Strukturen oder ein Mix aus einfachen Werten und serialisierten Objekten im localStorage gespeichert wurden, muss dies natürlich beim Lesen der Daten berücksichtigt werden. Es ist zu unterscheiden, ob es sich um einen einfachen String oder um ein Objekt handelt, welches mit JSON.stringify abgelegt und nun natürlich mit JSON.parse wieder hergestellt werden muss. Im hier aufgeführten Beispiel wurde dies mit einem try / catch Block realisiert. D.h. es wird versucht, den Wert als JSON zu parsen. Wenn es gelingt, kann das Objekt wieder hergestellt werden. Wenn nicht, handelt es sich um ein einfaches key / value-Paar als String.
var sTmp = '';
if(hasLocalStorage()) {
for(var i=0;i<window.localStorage.length; i++) {
var key = window.localStorage.key(i);
try {
json = JSON.parse(window.localStorage.getItem(key));
} catch (exception) {
json = null;
}
if (json) {
for (var prop in json) {
if (json.hasOwnProperty(prop)) {
sTmp += key+'.' + prop +' => ' + json[prop] + '<br />';
}
}
} else {
sTmp += key +' => ' + window.localStorage.getItem(key) + '<br />';
}
}
}
if (sTmp == '') sTmp = 'Keine Werte im LocalStorage vorhanden';
else sTmp = 'LocalStorage:<br />' + sTmp;
document.getElementById('divStorageItems').innerHTML = sTmp;
}
Löschen von Daten aus dem localStorage:
Das Löschen von Daten stellt keine besondere Herausforderung dar. Es können sowohl Einzelwerte, als auch der komplette localStorage auf einmal gelöscht werden.
if(hasLocalStorage()) {
if (window.localStorage.getItem(key) !== null) {
window.localStorage.removeItem(key)
}
}
getAllLocalStorage();
}
function clearLocalStorage() {
if(hasLocalStorage()) {
localStorage.clear();
}
getAllLocalStorage();
}
Fazit
LocalStorage ist ein praktikables Mittel, um den Traffic zwischen Client und Server zu reduzieren und somit die Performance zu verbessern bzw. die Abhängigkeit von einer online-Verbindung zu reduzieren. Selbstverständlich begibt man sich hierbei wieder mehr in die Abhängigkeit von Javascript. Insofern muss jeder Anwender selbst zwischen Vor- und Nachteilen abwägen.
Des Weiteren sollten Sie bei der Implementierung auch Sicherheitsaspekte berücksichtigen. Hierzu finden Sie Informationen in den therotischen Grundlagen zu localStorage.