Chrome 開發人員版針對 IndexedDB 提供 Blob 支援

Eiji Kitamura
Eiji Kitamura

Chrome 開發人員已在索引資料庫上推出 Blob 支援。

這是 Chrome 即將推出的功能,這項功能可讓 IndexedDB API 不需轉換為 Base64 字串即可儲存及擷取 Blob。

IndexedDB 提供大規模的鍵/值類型永久儲存空間,適用於大多數的新式瀏覽器 (Safari 預計在 iOS8 和 Mac OS X 10.10 中將支援)。請參閱設定導入狀態

Blob 是現代 JavaScript 引擎可處理的檔案類二進位物件。檔案物件繼承自 Blob。您也可以透過 XMLHttpRequest 擷取圖片和檔案做為 Blob。請參閱設定導入狀態

在已建立索引的資料庫上儲存 Blob

無法在 IndexedDB 中偵測 Blob 可用性。在沒有 Blob 的情況下,您基本上必須 try-catch 以使用字串而非 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);
}

Firefox 和 Internet Explorer 也支援 Blob 對 IndexedDB 的支援。請調查 Safari 支援情形。

歡迎繼續觀看影片!