LocalStorage存储对象无法正常渲染，仅显示逗号问题求助

我一眼就找到你代码里的问题啦！页面只显示逗号，是两个小细节没处理好，咱们一步步来修复：

问题1：map函数缺少返回值+未处理数组转字符串的逗号 #

你在map的回调函数里用了大括号，但没写return语句，导致每一次迭代都返回undefined。而且就算有返回值，map返回的数组直接赋值给innerHTML时，会自动转为逗号分隔的字符串，这就是你看到逗号的原因。

修复方式：要么去掉大括号让箭头函数隐式返回，要么显式加return，最后一定要用join('')把数组元素拼接成完整HTML：

// 隐式返回写法
document.getElementById('bookList').innerHTML = data.map(item => 
  `<div> <div>Title: ${item.title}</div> <div>Author: ${item.author}</div> <div>Pages: ${item.pages}</div> </div>`
).join('')

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

问题2：Checkbox状态获取错误 #

你用document.getElementById("checkbox").value拿到的是checkbox的默认固定值（一般是"on"），不是它是否被勾选的状态。要获取勾选状态，得改用checked属性：

var fields = {
  title: document.getElementById("title").value,
  author: document.getElementById("author").value,
  pages: document.getElementById("pages").value,
  checkbox: document.getElementById("checkbox").checked // 替换value为checked
};

优化后的完整代码 #

我还帮你优化了逻辑，页面初始化时先读取LocalStorage的旧数据，避免刷新后丢失，同时减少不必要的存储读取操作：

// 页面加载时先从LocalStorage读取已有数据，没有的话初始化空数组
let myLibrary = JSON.parse(localStorage.getItem('books')) || [];

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").checked
  };
  
  myLibrary.push(fields);
  localStorage.setItem('books', JSON.stringify(myLibrary));
  
  // 直接用最新的myLibrary数组渲染，不用重复读LocalStorage
  document.getElementById('bookList').innerHTML = myLibrary.map(item => 
    `<div style="border: 1px solid #eee; padding: 12px; margin: 8px 0;">
      <div>Title: ${item.title}</div>
      <div>Author: ${item.author}</div>
      <div>Pages: ${item.pages}</div>
      <div>Read Status: ${item.checkbox ? '已读完' : '未读完'}</div>
    </div>`
  ).join('');
};

内容的提问来源于stack exchange，提问作者Allen Chen