javascript - 添加包含元素引用的对象时 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

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

然而，默默地失败并不是预期的行为。据此structured clone algorithm ，它应该抛出 DataCloneError。