IndexedDB在添加包含元素引用的對象時失敗

我正在爲Google Chrome編寫一個應用程序（目標受衆是一個內部團隊），它允許用戶從iframe中操作元素。用戶可以使用鼠標來選擇DOM元素並對它們執行各種操作，例如更改顏色，字體等。IndexedDB在添加包含元素引用的對象時失敗

我正在使用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存儲區後，Google chrome會自動失敗（控制檯中沒有任何內容）。

我的問題是：有沒有其他人經歷過這種行爲，這是一個瀏覽器特定的錯誤？

明天我將把代碼提煉成JSfiddle。提前致謝。

來源

2012-10-12 Micah Henning

IndexedDB store structured clone您的對象。基本上你的數據將被轉換成JSON對象，這些對象不包括元素或節點數據類型。

但是，默默地失敗並不是預期的行爲。根據structured clone algorithm，它應該拋出DataCloneError。

來源

2012-10-12 23:29:19

感謝您的回覆。你對我如何傳遞元素的引用有任何想法嗎？ –

由於潛在的內存泄漏，我寧願避免引用指向元素的指針。如Kristof指出的那樣，最好的選擇是ID，如果你能夠獨一無二地生成。第二好的是NAME屬性，但我不知道如何以x-browser方式有效地檢索。所以看來人們正在使用CLASS名稱。 –

是否需要保存DOM元素？你能保存DOM元素的ID並通過它的ID檢索元素嗎？

indexeddb只能存儲沒有循環引用的數據。有一件事你可以嘗試。前一段時間，我寫了一篇關於如何序列化和反序列化JSON的函數的blog post。也許這可以幫助你，但我會勸你不要存儲完整的元素，除非沒有其他選擇。這會將大量不必要的數據添加到數據庫中，並且在序列化爲JSON時可能會丟失信息。

來源

2012-10-13 06:20:25

用戶使用此應用程序來更改元素的CSS樣式。這些CSS樣式是使用ID和類名稱進行定位的，所以我擔心會改變這些樣式，因爲它可能會產生意想不到的結果。我會想出一些解決辦法。感謝您的迴應！ –

你應該得到的鍍鉻異常（我只是嘗試在Chrome 23）從放（）本身，這意味着如果你有一個onError的處理程序，它不會被調用因爲異常被第一個叫：

也就是說，如果你有

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

異常將由第一線被拋出。

來源

2012-10-18 19:02:13 alecf

我使用相同版本的Chrome，但我沒有使用「put」交易。我將通過'store.add'事務將數組數據添加到Object Store中，該事務在Chrome的'onupgradeneeded'中相當於。 –

IndexedDB在添加包含元素引用的對象時失敗

回答

相關問題