无法在 Safari 上的 IndexedDB 中存储 Blob 类型答案

【问题标题】：Unable to store Blob types in IndexedDB on Safari无法在 Safari 上的 IndexedDB 中存储 Blob 类型
【发布时间】：2017-09-19 19:09:27
【问题描述】：

我在 Safari 10.1.2 版的 IndexedDB 中存储 blob 时遇到问题（在 IOS 上也面临同样的问题）。

我正在使用 angular2-indexeddb 模块包装器，但是 - 我认为这不是模块本身的问题。我的代码在 Chrome 中运行良好，但是在尝试将 blob 对象放入 Safari indexedDb 时，记录始终显示为“null”（请参阅 FileData 字段）：

我尝试了各种不同的 blob 文件（音频、视频、html），它们总是显示为“null”。插入此记录时，IndexedDb 不会返回（可见）错误。

根据我的阅读 - Safari 应该支持 blob。我认为这个问题可能与 blob 的创建方式有关？即，也许 Safari 不喜欢 blob 数据？

下面是我的代码示例（我在这里没有包含太多，所以如果需要更多信息，请告诉我）：

      // create blob:
      const aFileParts = ['<a id="a"><b id="b">foo!</b></a>'];
      const oMyBlob = new Blob(aFileParts, {type : 'text/html'});

      console.log('blob type' + oMyBlob.type); // outputs as 'text/html'

      // initialize my indexeddb store:
      return this.initializeStores().then(() => {

        // add 'oMyBlob' to the FileData data store:
        return this.db.add('FileData',
          { FileName: 'foo', FileData: oMyBlob, FileType: 'audio' }).then(() => {

            // Success
            console.log('added ' + 'foo' + ' to FileData store.');

            // Get the file from the FileData store
            return this.db.getByIndex('FileData', 'FileName', 'foo').then((record) => {
              return Promise.resolve();
            });

          }, (error) => {
            console.log(error);
            this.handleError(error)
            return Promise.reject(error);
          });
      }, (error) => {
        this.handleError(error);
        return Promise.reject(error);
      });

附带说明 - 我可以将此数据作为 ArrayBuffer 存储在 Safari IndexedDB 中而不会出现任何问题。问题是，当我从数据库中检索它时，我必须将它转换回 blob（所需的额外处理能力并不理想）。

非常感谢任何帮助。

【问题讨论】：

上次我检查 Safari 不支持 blob
他们是。我能够创建 blob，将它们显示为视频 - 但不能将它们保存在 IndexedDB 中。有点奇怪。
对不起。我的意思是说 indexeddb 的 safari 实现不支持写入或读取 blob
对不起，不记得确切的来源。我知道在 blob 存储首次出现时这是真的，但不确定是否仍然是真的
我在 localforage 上遇到了类似的问题。我能够通过将 Blob 保存在 primary_object 的根目录来解决它，而不是将其干净地存储为更深对象的 file 属性。为了让它工作，我创建了一个唯一的 id 存储在 deep 对象中，它允许我在根目录中检索 Blob。但那是 localforage，我不再遇到这个错误（不确定它是否已被 Safari 更新或其他东西修复）

标签： javascript ios safari blob indexeddb

【解决方案1】：

所以我设法找到了问题的原因。在创建我的商店时，我引用了一个不正确的索引（主要是因为我正在学习在线教程）

const objectDataStore = evt.currentTarget.result.createObjectStore(
    'FileData', { keyPath: 'id', autoIncrement: true });

我的商店中不存在密钥路径“id”。这导致保存 blob 时出现问题（奇怪的是没有报告错误......而且它似乎没有导致 chrome 出现问题）。

正确的代码：

const objectDataStore = evt.currentTarget.result.createObjectStore(
    'FileData', { keyPath: 'FileName', autoIncrement: true });

'FileName' 是我的商店对象中的一个属性的名称。这现在解决了桌面 safari 上的问题。所以这里的教训是确保 KeyPath 是正确的。

但是，我现在面临一个新问题。在 IOS Safari 上，blob 无法持久保存到 indexedDb。我收到以下错误：

error: DOMError {name: "UnknownError", message: "An unknown error occurred within Indexed Database."}

因此，IOS Safari 上的 indexedDb 似乎不支持 blob（我假设这是一个错误）。现在我将只存储 ArrayBuffers 而不是 blob。

【讨论】：

你知道这个bug在iOS中是否还存在吗？
@NeryOrtez 我不确定，我已经有一段时间没有研究过这个功能了。

【解决方案2】：

是的，我可以确认，在 iOS Safari 版本 11.2.6 上，IndexedDB 无法将 Blob 存储为值。

我写了一小段代码来存储一个字符串值，它可以工作。如果我注释掉字符串并用 Blob 替换它，使用完全相同的代码，Safari 会给出“未知错误”

{name: "UnknownError", message: "在索引数据库中发生未知错误。"}

也许在存储之前尝试将 Blob 转换为 ArrayBuffer。

【讨论】：

谢谢，但我已经在上面的回答中说明了该解决方案。

【解决方案3】：

如果您在 iOS/OSX 上仍然遇到 indexedDb 的问题，请不要使用自动增量，因为这是 Safari 中的一个错误。

【讨论】：