页面刷新后输入数据显示为[object Object]及表格布局异常问题求助

Hey there! Let's break down your two issues one by one and fix them up:

问题1：刷新页面后内容显示为[object Object] #

原因分析 #

你在提交表单时，犯了一个关键错误：往itemsArray里push的是DOM元素对象（inputTitle、inputAuthor、inputNumber是input元素本身，不是用户输入的文本值）：

itemsArray.push(inputTitle, inputAuthor, inputNumber)

当你用JSON.stringify把这些DOM对象存入localStorage时，它们会被序列化成带有复杂DOM属性的对象。刷新页面后，你取出这些对象并传给createBook，但createBook需要的是文本内容——直接把对象赋值给td.textContent时，JS会自动把对象转换成字符串[object Object]，这就是问题的根源。

另外，你当前的数组结构是把三个输入值作为单独元素存入（比如[title1, author1, pages1, title2, author2, pages2...]），这种结构不仅混乱，也不利于后续维护。

解决办法 #

1. 提交时，把图书的三个属性包装成一个对象存入数组，而不是单独的DOM元素：

itemsArray.push({
  title: inputTitle.value,
  author: inputAuthor.value,
  pages: inputNumber.value
})

2. 刷新页面渲染时，遍历数组里的每个图书对象，把对应的属性传给createBook：

data.forEach((book) => {
  createBook(book.title, book.author, book.pages)
})

问题2：表格结构零散，justify-content样式不生效 #

原因分析 #

1. 缺少表格行（tr）结构：你的createBook函数直接把<td>元素添加到<table>里，而正确的表格结构应该是table > tr > td。没有<tr>的话，所有单元格都会被浏览器默认混乱排列，导致数据零散。
2. justify-content对table不生效：justify-content是flex布局的属性，而table默认是表格布局，所以这个样式不会起作用。想要让表格列均匀分布，需要用表格布局的相关CSS属性。

解决办法 #

1. 完善表格结构：在createBook里先创建<tr>元素，把三个<td>放到<tr>里，再把<tr>添加到<table>中。
2. 添加CSS样式控制表格布局：给<table>设置宽度，让列均匀分配空间。

修改后的完整代码 #

HTML（添加基础样式） #

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Library</title>
  <style>
    #table {
      width: 100%;
      margin-top: 20px;
      border-collapse: collapse;
    }
    #table td {
      border: solid 2px blueviolet;
      padding: 8px;
      text-align: center;
      width: 33.33%; /* 让三列均匀分布 */
    }
    .input {
      margin: 5px;
      padding: 6px;
    }
    .submit, .login-btn button, #clear {
      padding: 6px 12px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <h1>Library</h1>
  <div id="login" class="login-btn">
    <button class="User" id="login">login</button>
  </div>
  <button id="clear">Clear</button>
  <form id="form" action="">
    <input class="input" type="text" id="input-title" placeholder="Title" required />
    <input class="input" type="text" id="input-author" placeholder="Author" required/>
    <input class="input" type="number" id="input-number" placeholder="Pages" required />
    <input value="Submit" id="submitbtn" class="submit" type="submit">
  </form>
  <input type="checkbox" class="checkbox"><span> Check me if you read the book</span>
  <table id="table">
    <!-- 新增表头，让表格更清晰 -->
    <tr>
      <td><strong>Title</strong></td>
      <td><strong>Author</strong></td>
      <td><strong>Pages</strong></td>
    </tr>
  </table>
  <script src="script.js"></script>
</body>
</html>

JavaScript #

// 获取DOM元素
const buttonLogin = document.getElementById("login")
const table = document.getElementById("table")
const clearBtn = document.getElementById("clear")
const form = document.getElementById("form")
const inputTitle = document.getElementById("input-title")
const inputAuthor = document.getElementById("input-author")
const inputNumber = document.getElementById("input-number")

// 初始化localStorage数组
let itemsArray = localStorage.getItem('items') ? JSON.parse(localStorage.getItem('items')) : []
localStorage.setItem('items', JSON.stringify(itemsArray))
const data = JSON.parse(localStorage.getItem('items'))

// 创建图书行的函数
const createBook = (title, author, pages) => {
  const tr = document.createElement('tr') // 创建表格行
  const tdTitle = document.createElement('td')
  const tdAuthor = document.createElement('td')
  const tdPages = document.createElement('td')

  tdTitle.textContent = title
  tdAuthor.textContent = author
  tdPages.textContent = pages

  tr.appendChild(tdTitle)
  tr.appendChild(tdAuthor)
  tr.appendChild(tdPages)
  table.appendChild(tr) // 把行添加到表格
}

// 表单提交事件
form.addEventListener('submit', function (e) {
  e.preventDefault()
  // 添加图书对象到数组
  itemsArray.push({
    title: inputTitle.value,
    author: inputAuthor.value,
    pages: inputNumber.value
  })
  localStorage.setItem('items', JSON.stringify(itemsArray))
  createBook(inputTitle.value, inputAuthor.value, inputNumber.value)
  // 清空输入框
  inputTitle.value = ''
  inputAuthor.value= ''
  inputNumber.value= ''
})

// 页面加载时渲染已保存的图书
data.forEach((book) => {
  createBook(book.title, book.author, book.pages)
})

// 清空列表事件
clearBtn.addEventListener('click', function () {
  localStorage.clear()
  // 保留表头，删除其他行
  while (table.children.length > 1) {
    table.removeChild(table.lastChild)
  }
  // 重置数组
  itemsArray = []
})

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