Sie befinden sich hier:
Homepage
»
Webseitengestaltung
»
Blog
»
HTML5 und CSS3 Tipps
21.10.2014

Verwendung von localStorage - praktisches Beispiel

Kategorie(n): HTML5 und CSS3 Tipps

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.

function hasLocalStorage(){
  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.

var oPerson = {Vorname:"", Nachname:""};

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.

function getLocalStorage() {
  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.

function getAllLocalStorage() {
  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.

function removeSingleEntryLocalStorage(key) {
  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.

Autor: Mein Name ist Harry Kämpf und ich bin seit vielen Jahren als Projekt Manager im Webumfeld tätig. Auf diesen Erfahrungen basieren die Tipps zur Webseitengestaltung. Ich schreibe gern über Webthemen, nehme aktuelle Trends auf und berate bei Bedarf. Mehr Infos über mich können Sie auf meiner Homepage nachlesen.

82

Kommentare:

07.Dezember2014

Nette Sache, das könnte man ja benutzen damit man den nervigen Cookie Hinweiß nicht einblenden muss. Man speichert Daten statt in einem Cookie einfach in localstore und kommt so um den Hinweis rum.
Hat mal jemand getestet ob das auch bei abgeschalteten Cookies funktioniert?

08.Dezember2014

Wenn man Cookies abschaltet, geht auch kein localStorage.

Fragen / Anregungen?

Sicherheitsabfrage:
Datenschutzhinweis: Die eingegebenen Daten werden nicht an Dritte weitergegeben.