Cookie-Alternative

Ereignisse von Storage

Autor: Andreas Hitzig • 6.9.2011 • ca. 3:05 Min

Inhalt

Wenn Sie die Anzahl der Einträge eines Storage-Objektes ermitteln möchten, nutzen Sie dafür das Attribut length. Dieses liefert Ihnen als Rückgabewert den entsprechenden Wert. var anz=localStorage.length weist der Variablen anz die Anzahl der enthaltenen Wertepaare zu. Einen Wert können Sie u...

Wenn Sie die Anzahl der Einträge eines Storage-Objektes ermitteln möchten, nutzen Sie dafür das Attribut length. Dieses liefert Ihnen als Rückgabewert den entsprechenden Wert. var anz=localStorage.length weist der Variablen anz die Anzahl der enthaltenen Wertepaare zu. Einen Wert können Sie über den Namen des Schlüssels ermitteln. Den Überblick, welche Zugriffsschlüssel aktuell in der Datenbank samt Wert gespeichert sind, erhalten Sie über die Funktion key(n), wobei n der Index ist. In Kombination mit dem Attribut length bauen Sie eine einfache Schleife auf und können auf diesem Weg alle Einträge durchlaufen.

var anz=localStorage.length;
for (var i=0 to anz-1) {
alert("Name des Schluessels ",i, " :",
key(i))
}

Mithilfe der for-Schleife durchlaufen Sie das komplette Array und geben jeweils den Namen des Zugriffsschlüssels aus.Die drei Funktionen getItem(key), setItem(key, value) und removeItem(key) haben Sie ja bereits in den vorherigen Beispielen kennengelernt. Mit diesen lesen Sie den Wert eines Schlüssels, legen ein neues Wertepaar an und löschen ein Wertepaar wieder. Den kompletten Speicher können Sie mithilfe der Funktion clear löschen, also beispielsweise localStorage.clear().

Ereignisse von Storage

Laut der Definition der W3C gibt es zwei Ereignisse, welche ein Browser beim Aktualisieren des Speicherbereichs auslösen kann. Diese sind notwendig, damit eine Synchronisation der Werte auch über die Grenzen von Registerkarten und Browserfenstern hinweg erfolgen kann.Das Ereignis onstorage wird ausgelöst, wenn ein Speicherbereich geändert wird. Alle Dokumente, welche die gleiche Session nutzen, empfangen dieses Ereignis ebenso wie die Dokumente, die aktuell eine Seite der gleichen Domäne oder Unterdomäne anzeigen. Der Auslöser für das zweite Ereignis onstoragecommit ist das Schreiben des lokalen Speichers auf den lokalen Datenträger.

Simulation

Das folgende Beispiel verdeutlicht den Sachverhalt der lokalen Speicherung. Immer wenn Sie die Seite laden, wird die Variable localStorage.zaehler um eins erhöht.

<p>Sie haben diese Seite bereits<b><script>
if (!localStorage.zaehler)
localStorage.setItem("zaehler",0);
localStorage.setItem("zaehler",
parseInt(localStorage.zaehler)+1);
document.write(localStorage.zaehler);</script></b> Mal besucht</p>

Zu Beginn wird überprüft, ob die Variable localStorage.zaehler bereits existiert und ansonsten der Zähler auf null gesetzt. Bei jedem Aufruf der Seite oder bei jedem neuen Laden wird der Zähler erhöht und anschließend der aktuelle Wert des Zählers ausgegeben.

Speicherung in Datenbank

Es gibt darüber hinaus noch eine dritte Variante: die Speicherung von Informationen in einer lokalen Datenbank, die direkt im Browser verankert ist. Dieser Weg bringt jedoch eine Reihe von Vorteilen mit sich: Bei den beiden vorherigen Varianten speichern Sie Ihre Daten immer mithilfe eines Schlüssels. Die Speicherung von umfangreicheren Strukturen ist mit sessionStorage und localStorage nicht möglich.

Die Arbeiten an der Web-SQL-Datenbank wurden offiziell eingestellt.

Für diese Belange gibt es die dritte Variante, die HTML5 vorsieht: die Speicherung der Daten in einer lokalen Datenbank, welche direkt mit dem Browser verknüpft ist. Die Definition gibt an dieser Stelle eine relationale Datenbank mit SQL als Abfragesprache vor. Eine erste Umsetzung dieses Standards sehen Sie bereits in der aktuellen Version des Safari Browsers, bei Opera sowie bei Chrome.

Zu Beginn versuchten einige Browser-Anbieter die Implementierung der lokalen Webdatenbank auf Basis von SQLite.

Die Entwickler von Safari haben als Datenbank SQLite integriert, die oftmals auch auf mobilen Geräten zum Einsatz kommt, wenn Speicherplatz eine limitierende Größe ist. Die Datenbank unterstützt die wesentlichen Funktionalitäten des SQL Standards - eine komplette Definition des Leistungsumfangs finden Sie auf der Website der Datenbank (www.sqlite.org ).

var datenbank = openDatabase("meine_
datenbank", "datenbank_v1");
database.executeSql("SELECT * FROM
tabelle1", function(erg1) {
....
database.executeSql("DROP TABLE
tabelle1", function(erg2) {
....
alert("Ausfuehrungen beendet, Tabelle
geloescht!");
});
});

Das Beispiel zeigt die wesentlichen Objekte im Umgang mit der Datenbank. Im ersten Schritt definieren Sie eine Variable, mit der Sie auf die Datenbank zugreifen. Mithilfe der Funktion executeSql() setzen Sie SQL-Befehle auf die Datenbank ab. Deren Ergebnisse werden entsprechend in Variablen - in der ersten Abfrage erg1 gespeichert und können im Folgenden weiterverarbeitet werden. Wird eine Datenbank-Tabelle nicht mehr benötigt, löschen Sie diese wie von SQL gewohnt mit DROP TABLE.Diese Vorgehensweise konnte sich aber nicht final durchsetzen und so gab die W3C im November letzten Jahres bekannt, diesen Ansatz nicht weiterzuverfolgen.

Nächste Seite

1 2 3