HTML5-JavaScript APIs: Website-Trinity
Kommentare

Web Storage
Wem IndexedDB als Speicherart im Client zu schwergewichtig ist, der kann auf Web Storage zurückgreifen. Web Storage ist ein einfaches System zur Speicherung von Schlüsselwertpaaren. Im Zusammenhang

Web Storage

Wem IndexedDB als Speicherart im Client zu schwergewichtig ist, der kann auf Web Storage zurückgreifen. Web Storage ist ein einfaches System zur Speicherung von Schlüsselwertpaaren. Im Zusammenhang mit Web Storage stehen Ihnen zwei globale Objekte zur Speicherung von Daten zur Verfügung: Zum einen localStorage und zum anderen sessionStorage. Der Unterschied liegt darin, dass localStorage langlebiger ist und den Neustart des Browsers überdauert. Die Daten in sessionStorage hingegen stehen Ihnen lediglich für die aktuelle Browsersitzung zur Verfügung und werden beim Beenden des Browsers gelöscht. Die Schnittstelle beider Speichervarianten ist allerdings identisch. Listing 5 zeigt Ihnen die verschiedenen Methoden, die Ihnen im Rahmen von Web Storage zur Verfügung stehen.

Listing 5: Web Storage
console.log('Elements: ' + localStorage.length);
localStorage.setItem('1', 'Firefox');
localStorage.setItem('2', 'Chrome');
console.log('Elements: ' + localStorage.length);
console.log('Element 2: ' + localStorage.getItem('1'));
console.log('Key 2: ' + localStorage.key(1));
localStorage.removeItem('2');
console.log('Elements: ' + localStorage.length);
localStorage.clear();
console.log('Elements: ' + localStorage.length);

Die Eigenschaft length gibt an, wie viele Elemente sich aktuell im jeweiligen Speicher befinden. Mit der setItem-Methode können Sie einen Schlüssel und einen Wert angeben, den Sie speichern möchten. Über die getItem-Methode und den Schlüssel können Sie den jeweiligen Wert wieder auslesen. Benötigen Sie einen Wert nicht mehr, können Sie diesen mit removeItem und dem Schlüssel aus dem Speicher entfernen. Rufen Sie setItem mit einem bereits bestehenden Schlüssel auf, wird der bestehende Wert durch den neuen Wert ersetzt. Dadurch überschreiben Sie quasi einen Eintrag im Speicher. Den Schlüssel eines Elements können Sie mit der key-Methode herausfinden. Sie müssen hier lediglich angeben, für das wievielte Element Sie den Schlüssel auslesen möchten. Mit dieser Methode und der Anzahl der Elemente im Speicher können Sie sich einen Iterator schaffen, mit dessen Hilfe Sie sämtliche Elemente des Speichers auslesen können.

Möchten Sie den gesamten sessionStorage oder localStorage leeren, erreichen Sie dies durch einen Aufruf der clear-Methode. Objekte, die gespeichert werden, werden zuerst in eine Zeichenkette umgewandelt. Das bedeutet für Sie als Entwickler, dass Sie dafür sorgen sollten, dass Ihre Objekte die toString-Methode korrekt implementieren und so eine ordnungsgemäße Repräsentation Ihres Objekts erstellt wird, die eine Wiederherstellung nach dem Auslesen aus dem Speicher erlaubt.

Pro Origin steht Ihnen jeweils ein abgeschirmtes localStorage und sessionStorage-Objekt zur Verfügung. Damit ist die Sicherheit und Integrität der Daten im Speicher sichergestellt. Geben Sie auf der Konsole Ihres Browser lediglich das Speicherobjekt an, erhalten Sie eine Repräsentation des Speichers mit sämtlichen darin liegenden Schlüsseln und Werten.

Zusätzlich zu den beiden Mechanismen, um Daten clientseitig in Datenbanken zu speichern, existiert noch eine Möglichkeit zum Umgang mit Dateien innerhalb des Browsers. Der nächste Abschnitt beschäftigt sich mit dem File-API.


In den Kommenden Teilen geht es um:

  • File-API
  • Web Workers
Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -