HTML5-JavaScript APIs: Teil 2 – IndexedDB
Kommentare

IndexedDB
Mit der IndexedDB steht Ihnen bei der Entwicklung von Webapplikationen eine vollwertige Datenbank auf Clientseite zur Verfügung. Bevor Sie die Datenbank verwenden können, muss diese initialisiert

IndexedDB

Mit der IndexedDB steht Ihnen bei der Entwicklung von Webapplikationen eine vollwertige Datenbank auf Clientseite zur Verfügung. Bevor Sie die Datenbank verwenden können, muss diese initialisiert werden. Hierfür gibt es einen sehr einfachen Trick: Beim Öffnen der Datenbankverbindung mithilfe der open-Methode des IndexedDB-Objekts können Sie eine Versionsnummer angeben. Existiert die Datenbank in dieser Version noch nicht auf dem aktuellen Client, wird eine Callback-Funktion, die Sie unter der Eigenschaft onupgradeneeded angeben, ausgeführt. Hier können Sie die Struktur der verschiedenen ObjectStores angeben. Ein ObjectStore hat stets einen Namen und einen so genannten keyPath, also eine Eigenschaft der Datensätze, die diese identifiziert. Außerdem können Sie durch Aufrufe der Methode createIndex auf den ObjectStore zusätzliche Indizes definieren. In Listing 3 sehen Sie, wie Sie eine Datenbank entsprechend initialisieren können.

Listing 3: Initialisierung einer IndexedDB
window.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;

var request = window.indexedDB.open("MyTestDatabase", 3);

request.onerror = function (event) {
    console.log(event.target.errorCode);
}

request.onsuccess = function (event) {
    console.log('Initialized');
}


request.onupgradeneeded = function(event) {
    var db = event.target.result,
        objectStore = db.createObjectStore("customers", { keyPath: "id" });

    objectStore.createIndex("name", "name", { unique: false });
    objectStore.createIndex("email", "email", { unique: true });

    /*for (var i in initialData) {
        objectStore.add(initialData[i]); 
    }*/
};

Ist die Initialisierung durchgeführt, können Sie die Datenbank in Ihrer Applikation verwenden. Die Operationen, die Ihnen dabei zur Verfügung stehen, sind: bestehende Elemente auslesen, neue Elemente hinzufügen und bestehenden Elemente löschen. Sämtliche Operationen passieren aufgrund einer Transaktion. Diese starten Sie mittels der transaction-Methode des Datenbankobjekts. Um die Transaktion korrekt zu starten, müssen Sie beim Methodenaufruf angeben, welche ObjectStores die Transaktion umfassen soll und welche Art von Operation Sie durchführen möchten, also ob Sie nur lesend oder auch schreibend auf die Datenbank zugreifen möchten. Innerhalb dieser Transaktion können Sie dann auf die einzelnen ObjectStores zugreifen. Das Erstellen neuer Elemente erfolgt über die Methode add eines ObjectStores. Als Argument übergeben Sie dieser Methode die Objektrepräsentation eines Datensatzes. Als Rückgabewert dieser Methode erhalten Sie ein Objekt, das die Eigenschaften onsuccess und onerror aufweist, denen Sie entsprechende Callback-Funktionen zuweisen können, die nach erfolgter Operation beziehungsweise im Fehlerfall aufgerufen werden. Gleiches gilt für die gesamte Transaktion. Auch hier können Sie über die Eigenschaften oncomplete und onerror Callback-Funktionen definieren.

Das Löschen von Daten erfolgt analog zum Hinzufügen. Hier steht Ihnen innerhalb des ObjectStores die Methode delete zur Verfügung. Sie akzeptiert den Wert des Schlüssels des zu entfernenden Datensatzes. Auch hier haben Sie die Möglichkeit, Callback-Funktionen für onsuccess und onerror zu definieren.

Die eingefügten Daten können Sie einerseits mit einem Aufruf der get-Methode auf einen ObjectStore auslesen, indem Sie den Schlüssel eines Datensatzes als Argument übergeben oder Sie nutzen einen zuvor von Ihnen definierten Index und lesen Daten anhand eines Indexwertes aus der Datenbank aus. Auch hier sollten Sie alle weiterführenden Operationen innerhalb des onsuccess-Callbacks ausführen. Über das Objekt, das Sie als Argument erhalten, können Sie über den Wert target.result auf das Ergebnis der Abfrage zugreifen.

In Listing 4 sehen Sie die verschiedenen Operationen für das Hinzufügen, Löschen und Auslesen von Daten in einem Codeblock.

Listing 4: IndexedDB-Operationen
objectStore.get('4').onsuccess = function (event) {
    console.log('Name: ' + event.target.result.name);
};

objectStore.delete('5').onsuccess = function () {
    console.log('removed');
}


objectStore.index('name').get('Donna').onsuccess = function (event) {
    console.log("ID: " + event.target.result.id);
};

Neben den hier vorgestellten Features verfügt IndexedDB noch über zahlreiche weitere Features. So können Sie beispielsweise mithilfe eines Cursors über sämtliche Elemente eines ObjectStores iterieren oder mit der Methode deleteDatabase eine komplette IndexedDB-Datenbank wieder von Ihrem Client entfernen.

Mit IndexedDB erhalten Sie auf Clientseite eine sehr umfangreiche Möglichkeit, mit der Sie jeweils mehrere gleichartige Objekte in ObjectStores speichern können. Die Struktur und der Inhalt der gespeicherten Objekte werden dabei nicht vom Browser vorgeschrieben. Ihnen steht es somit frei, wie Sie die einzelnen ObjectStores aufbauen.

Die Schattenseite dieser Schnittstelle ist, dass durch sie die Komplexität Ihrer Applikation im Frontend weiter anwächst, da Sie sich sowohl auf Server- als auch auf Clientseite um die Persistierung und Synchronisierung von Daten in einer Datenbank kümmern müssen.

Des Weiteren sollten Sie darauf achten, dass Datenbanken Speicherplatz benötigen. Wenn Sie nur einzelne Objekte speichern, die über wenige Eigenschaften mit kleinen Zeichenketten als Werte verfügen, ist das weniger ein Problem. Sollten Sie allerdings größere Datenmengen speichern wollen, kann es hier auch durchaus zu Problemen kommen. Firefox fragt beispielsweise beim Benutzer nach, wenn eine Webapplikation versucht, Blob-Daten mit einer Größe von über 50 MB zu speichern. Ansonsten begrenzt Firefox den maximalen Speicher für eine Datenbank nicht. Chrome hingegen limitiert den maximalen Speicherplatz, der zur Verfügung steht, relativ zum insgesamt verfügbaren Speicherplatz.

Der Vorteil von IndexedDB ist, dass Ihre gespeicherten Daten auch den Neustart des Browsers beziehungsweise sogar den Neustart des Rechners überdauern und erst gelöscht werden, wenn entweder der Benutzer über die Konfiguration seines Browsers die Daten manuell löscht oder Sie innerhalb der Applikation dafür sorgen, dass die Datenbank gelöscht wird.

Auch für die Sicherheit der Daten ist gesorgt, indem nicht domainübergreifend auf die Datenbanken zugegriffen werden kann. Das bedeutet, dass Sie nicht von einer Webapplikation aus Domain A auf die Daten einer Datenbank aus Domain B zugreifen können, obwohl Sie deren Namen und Aufbau kennen.

Der nächste Abschnitt dieses Artikels beschäftigt sich mit Web Storage – einem weiteren Mechanismus, mit dem Sie Daten auf Clientseite zwischenspeichern können.


In den Kommenden Teilen geht es um:

  • Web Storage
  • File-API
  • Web Workers
Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -