添加包含元素引用的对象时，IndexedDB 失败

Question

我正在为 Google Chrome（目标受众是内部团队）编写一个应用程序，它允许用户从 iframe 中操作元素。用户可以使用鼠标选择 DOM 元素并对它们执行各种操作，例如更改颜色、字体等。

我使用nodeIterator 方法仅选择具有ID 或类名的元素。然后对于这些元素中的每一个，我将一些特定于元素的属性添加到一个对象，并将该对象推送到一个数组。然后，我打开一个 IndexedDB 数据库并将数组中的每个对象添加到数据库中。

我的问题是：只要我不在对象中包含对元素的引用，一切正常。

// Works fine
array.push({
     width : currentNode.offsetWidth,
    height : currentNode.offsetHeight,
       top : currentNode.style.top;
      left : currentNode.style.left;
});

// Doesn't work
array.push({
      elem : currentNode,
     width : currentNode.offsetWidth,
    height : currentNode.offsetHeight,
       top : currentNode.style.top;
      left : currentNode.style.left;
});

Google chrome 在尝试将第一个元素添加到 IndexedDB 存储区后静默失败（控制台中根本没有任何内容）。

我的问题是：有其他人经历过这种行为吗？这是特定于浏览器的错误吗？

我明天将把我的代码提炼到 JSfiddle。提前致谢。

Answer 1

您应该从 put() 本身获得 chrome 中的异常（我刚刚在 Chrome 23 上尝试过），这意味着如果您有一个 onerror 处理程序，它将不会被调用，因为首先调用了该异常：

即如果你有

req = db.transaction("foo", "readwrite").objectStore("foo").put({...data with dom nodes })
req.onsuccess = ...
req.onerror = ...

异常会被第一行抛出。

Answer 2

是否需要保存 DOM 元素？你可以只保存 DOM 元素的 ID 并通过它的 ID 检索元素吗？

indexeddb 只能存储没有循环引用的数据。也许你可以尝试一件事。前段时间我写了一篇blog post，介绍了如何将函数序列化和反序列化为 JSON。也许这可以帮助你，但我建议你不要存储完整的元素，除非没有其他选择。这会在您的数据库中添加大量不必要的数据，并且在序列化为 JSON 时可能会丢失信息。

Answer 3

IndexedDB store structured clone 您的对象。基本上您的数据将转换为 JSON 对象，这些不包括 Element 或 Node 数据类型。

但是，静默失败并不是预期的行为。根据structured clone algorithm，它应该抛出DataCloneError。