Open Source im professionellen Einsatz
Linux-Magazin 10/2012
878

Web Storage

Sitzungsbezogene Daten lassen sich in HTTP-Cookies dauerhaft im Webbrowser speichern. Sie vereinfachen es, eine Session über das verbindungslose HTTP-Protokoll zu halten, sind aber als dauerhafter Speicher von Anwendungsdaten im Webbrowser ungeeignet. Aus diesem Grund hat das W3C im Jahr 2009 den so genannten Web Storage [4] geschaffen. Im Gegensatz zu den Alternativen Web SQL und Indexed DB ist diese Speichermöglichkeit in den aktuellen Versionen aller Webbrowser zu finden.

Web Storage bietet zwei Datenspeicher: Der Session Storage speichert Daten pro Tab, der Local Storage pro URL. Beide hinterlegen Schlüssel-Wert-Paare, jedoch bleiben nur die Daten des Local Storage dauerhaft gespeichert. Das Objekt »window.LocalStorage« realisiert Local Storage mittels Javascript (Listing 3).

Listing 3

Local Storage

01 window.LocalStorage = {
02  storage: window.localStorage,
03
04  save : function(obj) {
05   var pos = this._unpack('pos');
06   pos[obj.key] = obj;
07   this.storage.setItem('pos', JSON.stringify(pos));
08  },
09
10  read : function(key, cbk) {
11   cbk(this._unpack('pos')[key]);
12  },
13
14  _unpack : function(key) {
15   var data = this.storage.getItem(key)
16   return (data)?jQuery.parseJSON(data):{};
17  }
18 };

Das Attribut »storage« in Zeile 2 verweist auf den Local Storage. Die Methode »save« aus Zeile 4 speichert Objekte in einem Feld. Dieses schreibt Zeile 7 mit der Methode »setItem()« in den Local Storage. Um einen Wert zu erhalten, übersetzt »stringify()« das Feld zuvor in eine Zeichenkette im Json-Format.

Das Lesen eines Objekts erfolgt mittels »read« (Zeile 10). Wie »save« entpackt auch diese Methode zunächst das Feld der Objekte mit »unpack()« . Unpack liest mit »getItem()« das serialisierte Feld aus dem Local Storage (Zeile 15). Abschließend rekonstruiert »parseJSON()« das Feld. Die Methode »read()« ruft mit dem Ergebnis der Lese-Operation die benutzerdefinierte Callbackfunktion aus der Parameterliste in Zeile 10 auf.

Der Local Storage ist zum dauerhaften Speichern von Schlüssel-Wert-Paaren völlig ausreichend, nicht aber zum Aufbewahren strukturierter Daten. Die Laufzeit der Methode »stringify()« aus Listing 3 wächst mit der Größe des zu serialisierenden Objekts rasch an (Abbildung 4). Unter anderem deshalb schuf das W3C bald mit Web SQL [5] die Möglichkeit, über Javascript auf eine SQL-Datenbank im Webbrowser zuzugreifen. Das ist allerdings umstritten und die Weiterentwicklung des Standards wurde Ende 2010 eingestellt. Web SQL findet sich in den aktuellen Versionen der Webbrowser Opera, Chrome und Safari.

Abbildung 4: Benchmark-Resultat des Local Storage: Beim Speichern großer Felder steigt die Laufzeit steil an.

Ein Beispiel für Web SQL zeigt Listing 4. Vor den SQL-Anweisungen muss Zeile 3 erst einmal die Datenbank öffnen. Die Methode »openDatabase()« nimmt den Namen der Datenbank, die Version, einen Anzeigenamen und die mutmaßliche Größe der Datenbank in Byte entgegen. Eine leere Versionsnummer öffnet immer die jüngste Version.

Listing 4

Wrapper-Objekt für Web SQL

01 window.WebSQL = {
02  _open : function() {
03   return window.openDatabase('geos', '', 'myDB', 50000000);
04  },
05
06  reinstall : function(vers) {
07   var db = this._open();
08   db.changeVersion(db.version, vers, function(t) {
09     t.executeSql('CREATE TABLE pos (id, lat float, lon float)');
10   });
11  },
12
13  read : function (key, cbk) {
14    this._open().readTransaction(function(t) {
15     t.executeSql('SELECT * FROM pos WHERE id = ?', [key],
16       function(t, d) {d.rows.length?cbk(d.rows.item(0)):''},
17       function(t, e) {console.log(e.message)});
18    });
19  },
20
21  save : function(obj) {
22   this._open().transaction(function(t,r) {
23    t.executeSql('INSERT INTO pos (id, lon, lat) VALUES (?, ?, ?)',
24     [obj.key, obj.lon, obj.lat])
25   });
26  }
27 };

Zum Lesen von Daten dient »readTransaction()« in Zeile 14, zum Schreiben »transaction()« (Zeile 22). Beide Methoden laufen asynchron ab (siehe Kasten "Asynchroner Funktionsaufruf"). Die Methode »executeSql()« führt in den Zeilen 9, 15 und 23 SQL-Anweisungen aus. Die Fragezeichen in den SQL-Statements sind Platzhalter und werden positionsgetreu durch Elemente des folgenden Felds ersetzt.

Asynchroner Funktionsaufruf

Einen asynchronen Funktionsaufruf nimmt die Javascript-Engine aus dem sonst sequenziellen Programmablauf heraus und führt ihn baldmöglichst aus. So kann eine Anwendung weiterlaufen, während sie beispielsweise auf eine Eingabe wartet. War der Aufruf erfolgreich, kommt ein Success-Callback zur Ausführung, ansonsten ein Error-Callback. Beides sind Funktionen, die der asynchrone Aufruf als Parameter erhält.

In Abbildung 5 kommt der asynchrone Funktionsaufruf P2 nach dem im Programmablauf nächsten Schritt P3 zur Ausführung. Der auf P2 folgende Schritt ergibt sich aus der Parameterliste seines Aufrufs. In Webbrowsern läuft Javascript gewöhnlich in einem einzigen Thread ab.

Abbildung 5: Beim asynchronen Funktionsaufruf ist P2 baldmöglichst an der Reihe. Der Erfolg entscheidet darüber, wie es weitergeht.

Der Success-Callback von »executeSql()« in Zeile 16 ruft für die erste Zeile der Ergebnismenge – »data.rows.item(0)« – die benutzerdefinierte Callbackfunktion »cbk« auf. Der Error-Callback in Zeile 17 schreibt eine Fehlermeldung auf die Konsole. Das Datenbankschema lässt sich mit der Methode »changeVersion()« (Zeile 8) ändern. Diese Funktion erfordert die alte und die neue Versionsnummer. Die Anweisungen zur Schema-Manipulation werden im Success-Callback übergeben.

Object Store

Mozilla lehnt es ab, Web SQL in Firefox zu implementieren. Zudem ist das Abbilden von Objekten auf die Spalten einer Datenbanktabelle (Objekt-relationales Mapping) aufwändig. Als einfacher gilt, einen Object Store zu verwenden, wie es der Nachfolgestandard Indexed DB [6] vorschlägt. Indexed DB speichert die Objekte zu einem Schlüssel ab und bringt mit Transaktionen und Indizes wichtige Aspekte einer hochperformanten und mehrbenutzertauglichen Datenbank mit. Indexed DB ist partiell in den aktuellen Versionen von Firefox und Chrome umgesetzt sowie testweise in Microsofts kommendem Internet Explorer 10.

Diesen Artikel als PDF kaufen

Express-Kauf als PDF

Umfang: 7 Heftseiten

Preis € 0,99
(inkl. 19% MwSt.)

Linux-Magazin kaufen

Einzelne Ausgabe
 
Abonnements
 
TABLET & SMARTPHONE APPS
Bald erhältlich
Get it on Google Play

Deutschland

Ähnliche Artikel

  • React

    Vom Unternehmen Facebook kommt das quelloffene Javascript-Framework React, das Weboberflächen geschickt mit Datenschätzen verknüpft. Insbesondere die Renderfunktion macht sich dabei nützlich.

  • Firefox OS

    Javascript, HTML 5 und jede Menge Linux- und Android-Erbschaften: Das ist Firefox OS, das Smartphone-Betriebssystem, mit dem Mozilla auf den Markt der günstigen Smartphones drängt. Das Linux-Magazin hat die ersten beiden Referenz-Entwicklergeräte Keon und Peak von Geeksphone getestet.

  • Gut sortiert

    Große Datenmengen auf Webseiten übersichtlich anzuordnen ist eine Kunst. Am schnellsten gelänge es mit Javascript direkt im Client - wäre da nicht das spröde Document Object Model. Die Bibliothek Jquery erleichtert Entwicklern das Leben, indem sie die Skriptsprache aufpeppt und von Browsern abstrahiert.

  • Firefox-OS-Apps

    Erst Apps bringen die Smartness aufs Smartphone, da macht Firefox OS keine Ausnahme. Im Unterschied zur Konkurrenz bauen die Entwickler ihre Apps jedoch mit offenen Webtechnologien wie HTML 5, Javascript und CSS 3. Der Artikel zeigt das exemplarisch anhand einer App zum Stimmen von Gitarren.

  • Backbone.js

    Die Javascript-Engines moderner Browser sind leistungsfähig genug, um die Anwendungslogik zu übernehmen. Wie auf dem Server beschleunigen auch hier Frameworks die Entwicklung. Ein herausragendes Beispiel für diese Gattung ist Backbone.js, das ein lokales Datenmodell umsetzt.

comments powered by Disqus

Stellenmarkt

Artikelserien und interessante Workshops aus dem Magazin können Sie hier als Bundle erwerben.