javascript - 将 HTML Div 放入 PouchDB

Question

我想将 HTML div(及其所有内容)放入 JSON 对象并将其保存到 PouchDB 数据库。

我的 div 看起来像这样:

<div class="easel">
    <div class="square" style="background-color: white;"></div>
    <div class="square" style="background-color: white;"></div>
    <div class="square" style="background-color: rgb(85, 222, 25);"></div><div class="square" style="background-color: white;"></div>
    <div class="square" style="background-color: white;"></div>
    <div class="square" style="background-color: white;"></div>
    <div class="square" style="background-color: white;"></div>
    <div class="square" style="background-color: rgb(164, 101, 52);"></div><div class="square" style="background-color: white;"></div>
    <div class="square" style="background-color: white;"></div>
    <div class="square" style="background-color: white;"></div>
    <div class="square" style="background-color: rgb(214, 15, 77);"></div><div class="square" style="background-color: white;"></div>
    <div class="square" style="background-color: white;"></div>
    <div class="square" style="background-color: white;"></div>
</div>

我写了这样一个函数:

window.saveBoard = function() {
    var db = new PouchDB('tiles');
    var remoteCouch = false;
    var current_layout = $('.easel');
    var new_board = {
        _id: new Date().toISOString(),
        board: current_layout
    }
    db.put(new_board, function callback(err, result) {
        if(!err) {
            console.log("Successfully saved new board.");
        }
    })
}

但它似乎没有按照我的意愿行事，我在控制台中收到此错误:Uncaught DataCloneError: Failed to execute 'put on 'IDBObjectStore': 无法克隆对象。

我需要做什么来存储此 div 信息，以便稍后将其取回以提供给页面？

Answer 1

您不能将 HTML 元素直接存储在 PouchDB 中；您只能直接存储 JSON。因此，您需要在存储之前将您的 div 转换为某种数据结构格式。