LocalStorage 对象未被渲染

Question

我正在尝试将表单（字段变量）的 localStorage 项呈现到 localstorage，然后让它们在循环中呈现它们。但是项目没有被渲染，只渲染了一个逗号。我似乎无法解决这个错误...

let myLibrary = [];

const addBook = (event) => {
  event.preventDefault()
    var fields = {
      title: document.getElementById("title").value,
      author: document.getElementById("author").value,
      pages: document.getElementById("pages").value,
      checkbox: document.getElementById("checkbox").value
    };


myLibrary.push(fields)

localStorage.setItem('books', JSON.stringify(myLibrary));
const data = JSON.parse(localStorage.getItem('books'))



document.getElementById('bookList').innerHTML = data.map(item => {
  `<div>
    <div>Title: ${item.title}</div>
    <div>Author: ${item.author}</div>
    <div>Pages: ${item.pages}</div>
  </div>`
})


}

Answer 1

您的 map 函数正在返回一个数组，并且在该数组中的元素上没有某种 toString 函数，我想这会给您带来问题。

另一种方法可能是简单地使用 forEach，像这样：

const bookList = document.querySelector("#bookList");
data.forEach(item =>{
  bookList.innerHTML += /* your string here */
})

或者，也许更好，创建您希望附加的实际 DOM 节点，并使用它：

const bookList = document.querySelector("#bookList");

bookList.append(...data.map(/* here, a function to create the actual DOM nodes rather than a string*/) );

这可行，因为您将 DOM 个节点的数组作为附加方法的参数传播：https://devdocs.io/dom/element/append

LocalStorage 对象未被渲染

LocalStorage objects are not being rendered

javascript

local-storage