senäh

17senäh und so…

HTML/CSS/JS
22. Jan 2012
Kommentare: 2

Einmal clientseitiges Speichern in einfach, bitte! Web Storage API

Kategorien: HTML/CSS/JS | 22. Jan 2012 | Kommentare: 2

Yeehaah! Meine Bachelorarbeit zum Thema HTML5 ist fertig und endlich kann ich mich mal wieder dem Bloggen widmen. Damit ihr von der langen Auszeit auch etwas habt, werde ich die nützlichsten Inhalte der Arbeit in Form kleiner Artikel wiederverwerten. Ist das nicht toll? Anfangen werde ich mit einer meiner Lieblings APIs aus HTML5: der Web Storage API! Warum ich sie mag? Weil sie nützlich und verdammt einfach zu benutzen ist.

Die Web Storage API ermöglicht es Entwicklern clientseitig Daten in einem Storage Objekt abzuspeichern. Das Storage Objekt dient dabei als eine Liste, die Werte einem Key zuordnet. Die HTML5 Spezifikation schreibt vor, dass nur Strings als Werte gespeichert werden können. Andere Datentypen sollten deswegen vor dem Speichern in das stringbasierte JSON-Format geparst werden und beim Auslesen wieder zurück (siehe Beispiel im letzten Abschnitt). Der Zugriff auf die API erfolgt über die neuen globalen Objekte „localStorage“ und „sessionStorage“, welche auch als Attribute des „window“ Objektes aufgerufen werden können. Sie unterscheiden sich darin, dass die in „sessionStorage“ gespeicherten Werte beim Schließen des Browser automatisch gelöscht werden. Auf diese Weise kann bspw. der Text einer E-Mail wiederhergestellt werden, falls der Nutzer aus Versehen sein Browserfenster aktualisiert. Die in „localStorage“ gespeicherten Werte werden hingegen auch beim Schließen des Browsers nicht gelöscht. Davon abgesehen ist die konkrete API bei beiden Objekten identisch:

 /* Den Wert "17" im Key "Zahl" speichern. */
localStorage.setItem("Zahl", "17");

/* Den Wert des Keys "Zahl" abfragen. */
localStorage.getItem("Zahl");

/* Die Anzahl verwendeter Keys abfragen. */
localStorage.length;

 /* Den Namen des Keys mit dem Index 0 abrufen. */
localStorage.key(0);

/* Einen Wert und den dazugehörigen Key löschen. */
localStorage.removeItem("Zahl");

/* Alle Werte und Keys löschen. */
localStorage.clear();

Ich habe in JsFiddle mal ein kleines Beispiel vorbereitet.

Die in den Storage Objekten gespeicherten Werte können nicht zwischen verschiedenen Browsern ausgetauscht werden. Außerdem steht der Zugriff auf die Werte nur Seiten derselben Herkunft zur Verfügung (siehe same origin policy). Die Web Storage Spezifikation legt nicht fest, wie viele Daten eine Webapplikation in den Storage Objekten speichern darf. Der maximal zur Verfügung gestellte Speicherplatz unterscheidet sich deswegen von Browser zu Browser bzw. kann vom Nutzer in den Browsereinstellungen festgelegt werden.

Mit den Stärken von JavaScript (ja, ich bin pro JavaScript!!!) kann die API dahingehend erweitert werden, dass man dank JSON Parsing auch andere Datentypen als Strings abspeichern kann. Wer es nicht weiß: JSON repräsentiert JavaScript Objekte in Textform. Dafür müsst ihr dem „prototype“ Objekt des Storage Objektes nur folgende Methoden hinzufügen:

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);
};

Tolle Sache oder?

Ein Vergleich auf caniuse zeigt, dass abgesehen vom iOS Safari 3.2 jeder populäre Browser, der die Web Storage API unterstützt ebenfalls JSON Parsing implementiert. Da der iOS Safari 3.2 lediglich 0.08% Marktanteil besitzt (laut caniuse), kann die folgende Erweiterung der API relativ gefahrlos produktiv eingesetzt werden.

Das war es mit meiner Kurzvorstellung der Web Storage API. Ich hoffe, sie hilft euch weiter und dass ihr euch über neue Artikel von mir freut 😀

Wo war eigentlich das obligatorische Katzenbild in diesem Beitrag?!

Autor: Pipo

...kommt ursprünglich aus der Designerecke, ist aber im Laufe seines Studiums in die Webentwicklung gestolpert. Kann sich seit dem nicht so richtig entscheiden wo er hingehört und wagt deswegen vielleicht die Flucht nach vorne in ein komplett neues Gebiet. Vielleicht Management? Niemand weiß es. Auch er nicht.