webstorage_motiv

Der HTML5 Web Storage - Eine kurze Einführung

Webseiten stellen immer mehr Informationen bereit, doch dabei ergibt sich ein Problem: Die Daten stehen meist nur online zur Verfügung bzw. nur dann, wenn man gerade eine Webseite aufruft und dort aktiv Daten abruft oder eingibt. Um es möglich zu machen, Daten auch nach dem Verlassen einer Webseite bzw. auch ohne ständig mit dem Internet verbunden zu sein zugänglich zu machen, bietet HTML5 den Webstorage. Dieser kommt in zwei unterschiedlichen Formen: der localStorage und der sessionStorage. Doch wo liegen dabei die Unterschiede und wie kann man diesen auf einer Webseite einsetzten?

Sowohl der local als auch der sessionStorage stehen beide als eine Erweiterung der Storage-Funktion. Sie bieten beide die gleichen Funktionen und Möglichkeiten, um Daten abzuspeichern. Doch sie haben einen großen Unterschied. Sie unterscheiden sich dabei, wie Daten abgespeichert werden.

Der sessionStorage ist ein Speicher, welcher innerhalb einer Session bzw. eines Besuches einer Webseite zur Verfügung steht. Dies bedeutet aber auch, sobald der User die Seite verlässt und somit die Session beendet, werden auch die Informationen aus dem Speicher gelöscht.

Der localStorage ist dagegen ein Speicher, welcher über die Session bzw. über das Schließen eines Browser hinaus die Daten speichert und diese auch zu einem späteren Zeitpunkt wieder laden / bereitstellen kann.

Sowohl der local als auch der sessionStorage ist Domain spezifisch. Dies bedeutet: Auf die Daten der beiden Storages kann immer nur innerhalb der Domain zugegriffen werden, unter welcher diese auch im Storage gespeichert wurden. Durch eine Erweiterung um Scripte und Funktionen besteht aber auch die Möglichkeit, diesen über mehrere Domains abrufbar zu gestalten.

Wie bereits erwähnt bieten beide die gleichen Funktionen an. Im Vordergrund stehen dabei die folgenden Funktionen bzw. Interaktionen:

  • Information abspeichern bzw. überschreiben (set)
  • Information lesen (get)
  • Information löschen (remove)

Ein Wert, welcher in den Storage geschrieben wird, besteht dabei immer aus sogenannten Key-Value-Pairs. Also einem Key, über welchen der entsprechende Eintrag eindeutig gefunden werden kann und einem dazugehörigen Wert.

Doch wann setze ich am besten local und wann den sessionStorage ein?

Angenommen auf einer Webseite soll gespeichert werden, welche Farbe ein User gerne als Hintergrundfarbe haben möchte. Da man diese Information auch noch nach dem Verlassen bzw. erneuten Besuch des User abrufbar haben möchte, bietet sich hierfür nur der localStorage an.

Zunächst wird der Wert in den localStorage geschrieben.

//setItem for Key 'bgcolor' with Value 'orange'
localStorage.setItem('bgcolor', 'orange');

Beim nächsten Aufruf der Seite durch den User kann nun geprüft werden, ob bereits eine Farbe für den Hintergrund ausgewählt wurde.

//getItem Value of Item with Key 'backgorund' 
var bgcolor = localStorage.getItem('bgcolor');
console.log(bg_color);
//Check if Key with Value is set or not
if(bgcolor === null) {
  console.log("not set");
} else {
  console.log("set: " + bgcolor;
}

Diese Abfrage prüft zunächst, ob bereits ein Value zum Key bgcolor gesetzt wurde. Wenn ja, wird genau dieser Value zurückgeliefert, ansonsten erhält man einen leeren Wert bzw. null.

Entscheidet sich der Nutzer nun allerdings dazu, dass er nicht mehr Orange, sondern eine andere Farbe als Hintergrund setzten möchte, kann der Value einfach geändert bzw. überschrieben werden. Hier muss einfach ein neuer Value mit gleichem Key gesetzt werden.

//Update Value for Key 'bgcolor'
localStorage.setItem('bgcolor', 'blue');

Falls der User sich dazu entscheidet, seine Auswahl zu löschen, kann das Key-Value-Pair gelöscht werden.

//Delete Key-Value-Pair for Key 'bgcolor'
localStorage.removeItem('bgcolor');

Analog dazu lässt sich ein ähnlicher Aufbau auch mit dem sessionStorage umsetzen. Allerdings geht dabei das Key-Value-Pair beim Beenden der Session (beispielsweise durch das Schließen des Browsers oder des Browser-Tabs) verloren. 

Dies ist nur ein sehr kleines Beispiel für die Anwendung des localStorage. Die Einsatzmöglichkeiten für einen solchen Storage sind nahezu unbegrenzt und lässt sich auf viele verschiedene Ansätze und Konzepte anwenden.

Interessante Links:
w3schools – WebStorage
Mozilla Docs – Storage
Mozilla Docs – localStorage
Mozilla Docs – sessionStorage

0