Javascript 如何序列化和加载HTML元素'；是gridstack.js中的数据吗？

我使用gridstack库创建了样式书及其图像的网格：

我还有一个“保存”按钮，它调用

saveGrid（）

函数来保存每本书在网格上的位置，并使用

grid.load（serializedData）

HTML:

问题是，当单击“保存”按钮时，项目的位置会被保存，但实际的HTML图像和内容（如按钮）不会被保存，如下所示：

---

我已经解决了这个问题，编辑了我的

saveGrid（）

函数，并创建了一个新的

loadGrid（）

函数，在保存后加载网格，以及一个

addBooks（）

函数，在加载页面时从数组加载书籍。下面是HTML和完整的JS代码：

HTML：

<div class="grid-stack"></div>

JS:

var数组=[
{“ISBN”：“0385504209”，“bookURL”：https://images.penguinrandomhouse.com/cover/9780767926034"},
{“ISBN”：“0143039431”，“bookURL”：https://upload.wikimedia.org/wikipedia/commons/a/ad/The_Grapes_of_Wrath_%281939_1st_ed_cover%29.jpg"},
{“ISBN”：“0743273567”，“bookURL”：https://prodimage.images-bn.com/pimages/9780743273565_p0_v8_s550x406.jpg"},
{“ISBN”：“0743297334”，“bookURL”：https://upload.wikimedia.org/wikipedia/commons/8/8b/The_Sun_Also_Rises_%281st_ed._cover%29.jpg"},
{“ISBN”：“0553283685”，“bookURL”：http://books.google.com/books/content?id=wDVV6y-8YHEC&printsec=frontcover&img=1&zoom=1&source=gbs_api“}
]
var grid=GridStack.init({
专栏：8，
动画：对，
//有点不可靠-->浮动：是的，
对,，
rtl：是的
})
const addBooks=（）=>{
grid.batchUpdate（）
booksArray.forEach（（书籍，索引）=>{
grid.addWidget(`
`, {
宽度：2，
身高：3，
诺里斯：是的，
staticGrid：正确
})
grid.engine.nodes[index].ISBN=book.ISBN
grid.engine.nodes[index].bookURL=book.bookURL
console.log（document.querySelector（'.book cover'）.id）
})
grid.commit（）
console.log（grid.engine.nodes）
}
const saveGrid=（）=>{
序列化数据=[]
console.log（grid.engine.nodes）
grid.batchUpdate（）
grid.engine.nodes.forEach（（节点，索引）=>{
console.log（node.el）
console.log（node.ISBN）
console.log（node.bookURL）
数据推送({
x:node.x，
y:node.y，
宽度：2，
身高：3，
诺里斯：是的，
ISBN:node.ISBN，
bookURL:node.bookURL
})
})
serializedData.sort（）
grid.commit（）
log（JSON.stringify（serializedData，null，'））
console.log（grid.engine.nodes.length）
}
const loadGrid=（）=>{
//首先清空网格：
removeAll（{detachNode:false}）/{detachNode:false}
//grid.assign（）
console.log（序列化数据）
var items=GridStack.Utils.sort（序列化数据）
console.log（项目）
grid.batchUpdate（）
items.forEach（（节点，索引）=>{
grid.addWidget(`
`，节点）
grid.engine.nodes[index].ISBN=node.ISBN
grid.engine.nodes[index].bookURL=node.bookURL
console.log（节点）
})
grid.commit（）
console.log（grid.engine.nodes.length）
console.log（grid.engine.nodes）
}
window.onload=addBooks（）

saveGrid = () => {
    serializedData = [];
    grid.engine.nodes.forEach((node) => {
      serializedData.push({
        x: node.x,
        y: node.y,
        width: node.width,
        height: node.height,
        noResize: true, 
        el: node.el
      });
    });
  };

<div class="grid-stack"></div>

var booksArray = [
    {"ISBN": '0385504209', "bookURL": "https://images.penguinrandomhouse.com/cover/9780767926034"},
    {"ISBN": '0143039431', "bookURL": "https://upload.wikimedia.org/wikipedia/commons/a/ad/The_Grapes_of_Wrath_%281939_1st_ed_cover%29.jpg"},
    {"ISBN": '0743273567', "bookURL": "https://prodimage.images-bn.com/pimages/9780743273565_p0_v8_s550x406.jpg"},
    {"ISBN": '0743297334', "bookURL": "https://upload.wikimedia.org/wikipedia/commons/8/8b/The_Sun_Also_Rises_%281st_ed._cover%29.jpg"},
    {"ISBN": '0553283685', "bookURL": "http://books.google.com/books/content?id=wDVV6y-8YHEC&printsec=frontcover&img=1&zoom=1&source=gbs_api"}
]

var grid = GridStack.init({
    column: 8, 
    animate: true, 
    //kinda wonky -->  float: true,
    removable: true,
    rtl: true
})

const addBooks = () => {
    grid.batchUpdate()
    booksArray.forEach((book, index) => {
        grid.addWidget(`
        <div>
            <div class="grid-stack-item-content">  
                <img src="${book.bookURL}" class="book-cover" id=${book.ISBN}></img>
                <div class="button-group">
                    <a href="something" class="button4" style="background-color:#f21832"><i class="fa fa-minus-circle"></i></a>

                    <button class="btn button4" data-toggle="modal" data-target="#exampleModalLong" style="background-color:#4f21cf"><i class="fa fa-info-circle"></i></button>
                    
                    <a href="something" class="button4" style="background-color:#18de54"><i class="fa fa-check"></i></a>  
                </div>  
            </div>
        </div>`, {
            width: 2,
            height: 3,
            noResize: true,
            staticGrid: true
        })

        grid.engine.nodes[index].ISBN = book.ISBN
        grid.engine.nodes[index].bookURL = book.bookURL

        console.log(document.querySelector('.book-cover').id)

    })
    grid.commit()  
    console.log(grid.engine.nodes)
}

const saveGrid = () => {
    serializedData = []
    console.log(grid.engine.nodes)
    grid.batchUpdate()
    grid.engine.nodes.forEach((node, index) => {
        console.log(node.el)
        console.log(node.ISBN)
        console.log(node.bookURL)
        serializedData.push({
                x: node.x,
                y: node.y,
                width: 2,
                height: 3,
                noResize: true,
                ISBN: node.ISBN,
                bookURL: node.bookURL
        })
    })
    serializedData.sort()
    grid.commit()
    console.log(JSON.stringify(serializedData, null, '  '))
    console.log(grid.engine.nodes.length)
  }

const loadGrid = () => {
    // empty the grid first:
    grid.removeAll({detachNode:false}) //{detachNode: false}
    // grid.assign()
    console.log(serializedData)
    var items = GridStack.Utils.sort(serializedData)
    console.log(items)
    grid.batchUpdate()
    items.forEach((node, index) => {
        grid.addWidget(`
        <div>
            <div class="grid-stack-item-content">  
                <img src="${node.bookURL}" class="book-cover"></img>
                <div class="button-group">
                    <a href="something" class="button4" style="background-color:#f21832"><i class="fa fa-minus-circle"></i></a>
                    <a href="something" class="button4" style="background-color:#4f21cf"><i class="fa fa-info-circle"></i></a>
                    <a href="something" class="button4" style="background-color:#18de54"><i class="fa fa-check"></i></a>  
                </div>  
            </div>
        </div>`, node)

        grid.engine.nodes[index].ISBN = node.ISBN
        grid.engine.nodes[index].bookURL = node.bookURL

        console.log(node)

    })
    grid.commit()
    console.log(grid.engine.nodes.length)
    console.log(grid.engine.nodes)
  }

window.onload = addBooks()