2

我正在为 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;
});

谷歌浏览器在尝试将第一个元素添加到 IndexedDB 存储后静默失败（控制台中没有任何内容）。

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

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

4

3 回答 3

4

IndexedDB存储对象的结构化克隆。基本上您的数据将转换为 JSON 对象，这些不包括 Element 或 Node 数据类型。

然而，静默失败不是预期的行为。根据结构化克隆算法，它应该抛出 DataCloneError。

于 2012-10-12T23:29:19.033 回答
1

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

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

于 2012-10-13T06:20:25.263 回答
0

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

即如果你有

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

第一行将抛出异常。

于 2012-10-18T19:02:13.797 回答