Chrome Dev で IndexedDB の Blob サポートを開始

Eiji Kitamura

Chrome Dev で IndexedDB での Blob のサポートがリリースされました。

これは、IndexedDB API が Blob を Base64 文字列に変換せずに保存および取得できるようにする、Chrome で待望の機能です。

IndexedDB は、最新のほとんどのブラウザで利用できる大規模な Key-Value タイプの永続ストレージを提供します（Safari は iOS8 と Mac OS X 10.10 でサポートされる予定です）。実装状況を確認する。

Blob は、最新の JavaScript エンジンが処理できるファイルのようなバイナリ オブジェクトです。ファイル オブジェクトは Blob から継承されます。XMLHttpRequest を使用して、画像やファイルを Blob として取得することもできます。実装状況を確認する。

IndexedDB に Blob を保存する

IndexedDB で Blob の可用性を検出する機能はありません。基本的には、try-catch で Blob が使用できない場合は Blob ではなく文字列を使用する必要があります。サンプルコードを次に示します。

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

IndexedDB の Blob サポートは、Firefox と Internet Explorer でもすでに利用できます。Safari のサポートについては調査が必要です。

お楽しみください！