Blob-Unterstützung für IndexedDB in Chrome Dev

Eiji Kitamura

Twitter GitHub Glitch Mastodon

Chrome Dev unterstützt jetzt Blobs in IndexedDB.

Dies ist eine lang erwartete Funktion für Chrome, die es der IndexedDB API ermöglicht, einen Blob zu speichern und abzurufen, ohne ihn in einen Base64-String zu konvertieren.

IndexedDB bietet einen großen nichtflüchtigen Speicher für Schlüssel/Wert-Paare, der in den meisten modernen Browsern verfügbar ist (Safari wird offenbar bald in iOS 8 und Mac OS X 10.10 unterstützt werden). Informationen zum Implementierungsstatus finden Sie hier.

Blob ist ein dateiähnliches binäres Objekt, das moderne JavaScript-Engines verarbeiten können. Dateiobjekte werden von Blob übernommen. Sie können Bilder und Dateien auch als Blob über XMLHttpRequest abrufen. Informationen zum Implementierungsstatus finden Sie hier.

Blob in IndexedDB speichern

Es gibt keine Möglichkeit, die Blob-Verfügbarkeit in IndexedDB mithilfe von Features zu erkennen. Sie müssen prinzipiell versuchen, den String zu fangen und dann anstelle von Blob zu verwenden, wenn dieser nicht verfügbar ist. Hier ist ein Beispiel-Code:

// Create an example Blob object
var blob = new Blob(['blob object'], {type: 'text/plain'});

try {
    var store = db.transaction(['entries'], 'readwrite').objectStore('entries');

    // Store the object  
    var req = store.put(blob, 'blob');
    req.onerror = function(e) {
        console.log(e);
    };
    req.onsuccess = function(event) {
        console.log('Successfully stored a blob as Blob.');
    };
} catch (e) {
    var reader = new FileReader();
    reader.onload = function(event) {
        // After exception, you have to start over from getting transaction.
        var store = db.transaction(['entries'], 'readwrite').objectStore('entries');

        // Obtain DataURL string
        var data = event.target.result;
        var req = store.put(data, 'blob');
        req.onerror = function(e) {
            console.log(e);
        };
        req.onsuccess = function(event) {
            console.log('Successfully stored a blob as String.');
        };
    };
    // Convert Blob into DataURL string
    reader.readAsDataURL(blob);
}

Blob-Unterstützung für IndexedDB ist bereits in Firefox und Internet Explorer verfügbar. Die Unterstützung für Safari muss geprüft werden.

Viel Spaß!