IndexedDB：未捕获（在Promise中）的DOM异常

Question

我正在使用indexedDB（通过npm的idb包装器）来存储表示音频通道数据的2D Float32数组。它可以正常工作一段时间，但是当其中一个数组的长度达到大约16658432时，idb会崩溃，并显示标题中的异常。由于我正在使用React和Next.js，因此堆栈跟踪无用，但从我挖掘出来的信息来看，它似乎在idb的缓存部分崩溃了。请注意：我可以存储多个大型数组，没有问题，但一旦它们中的任何一个超过这个“限制”，所有内容都会崩溃。

这是我必须处理的限制，还是可以以某种方式解决？我可以将2D数组拆分为两个数组并将它们作为单独的条目存储，但这是一个不太理想的解决方案，一旦它们增长过大就会导致相同的问题。

只是对idb事务的简单包装器：

export const asyncPut = async (
  dbName: string,
  tableName: string,
  key: string,
  value: any // [Float32Array, Float32Array]
): Promise<void> => {
  try {
    const db = await asyncOpenDb(dbName, tableName);
    const transaction = db.transaction(tableName, "readwrite");
    await transaction.objectStore(tableName).put(value, key);
  } catch (error) {
    // I catch the error here
    console.error("**IDB Error:", error);
  }
};

- Pavel Kozlovsky

---

你是否在没有包装库的情况下遇到了这个错误？ - Josh

@Josh 我试过了，它也会崩溃并抛出相同的异常。事件对象包含目标对象，该对象具有一个名为 DOMException 的错误属性。 - Pavel Kozlovsky

Answer 1

我刚在Chrome中测试了一下，他们可能已经改进了你测试过的错误。

当我试图插入这个数组时，我遇到的错误是：

ar = new Array(16658432).fill(1)

这是因为它超过了单个对象的最大大小限制:

target: IDBRequest
error: DOMException
code: 0
message: "The serialized keys and/or value are too large (size=515354750 bytes, max=133169152 bytes)."
name: "UnknownError"
__proto__: DOMException

测试环境:

• 谷歌浏览器
• 版本 76.0.3809.100 (官方构建) (64位)

- Deni Spasovski