javascript - Mobile Safari 10 IndexedDB Blob

Question

Safari 10 中的 IndexedDB 现在支持 blob。这在桌面上运行良好，但 iOS 10 上的移动 Safari 会抛出错误:

UnknownError

有时结合使用:

TransactionInactiveError (DOM IDBDatabase Exception): Failed to store record in an IDBObjectStore:
The transaction is inactive or finished.

代码(缩写):

var indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB || window.msIndexedDB,
    READ_WRITE = IDBTransaction && IDBTransaction.READ_WRITE ? IDBTransaction.READ_WRITE : 'readwrite',
    storeName = 'files',
    db;

init: function() {
    var request = indexedDB.open('mydb');
    request.onerror = ...;
    request.onupgradeneeded = function() {
        db = request.result;
        db.createObjectStore(storeName);
    };
    request.onsuccess = function() {
        db = request.result;
    };
},

save: function(id, data) {
    var put = function(data) {
            var objectStore = db.transaction([storeName], READ_WRITE).objectStore(storeName),
                request = objectStore.put(data, id);

            request.onerror = ...;
            request.onsuccess = ...;
        };

    // not all IndexedDB implementations support storing blobs, only detection is try-catch
    try {
        put(data);
    } catch(err) {
        if (data instanceof Blob) {
            Helpers.blobToDataURL(data, put);
        }
    }
}

在 Mobile Safari 10 上，.put() 不会像以前那样抛出，只会在稍后的异步错误回调中抛出。

Base64 字符串工作正常。

Mobile Safari 中的错误还是我必须更改代码？

测试用例:http://fiddle.jshell.net/j7wh60vo/7/

Answer 1

遇到了同样的问题。 Chrome 54 和 Safari 10 在桌面上运行良好，但在 Mobile Safari 上，我在尝试将 Blob 存储到 IndexedDB 时不断收到 Unknown 错误。我可以确认这确实只是 Mobile Safari 上 Blob 的问题，而不是 API 的滥用。

幸运的是，ArrayBuffers 工作正常。所以我改为下载图像，如:

xhr.open('GET', url, true);
xhr.responseType = 'arraybuffer';

然后将它们作为ArrayBuffers保存到IndexedDB中，拉出来得到一个url后，将它们转换成Blob:

putRequest = objectStore.put(arrayBuffer, id);
putRequest.onsuccess = function(event) {
  objectStore.get(id).onsuccess = function(event) {
    var blob = new Blob([event.target.result], { type: 'image/jpeg'});
    var URL = window.URL || window.webkitURL;
    blobUrl = URL.createObjectURL(blob);
  };
};

我宁愿不必像这样将 ArrayBuffers 转换为 Blob，因为我认为这会降低性能。但它有效。