无法将对象保存至localStorage，页面加载后无法读取数据求助

核心问题分析 #

1. 未正确初始化 bookShelf：当 localStorage 中无数据时，localStorage.getItem("storedbookShelf") 返回 null，JSON.parse(null) 结果也是 null。后续尝试向 null 执行 push 操作会抛出错误，导致数据无法正常保存。
2. 缺少页面加载时的渲染逻辑：当前代码仅通过点击 "+" 按钮添加书籍元素，但未在页面加载时从 localStorage 读取数据并生成对应的书籍 DOM 元素。
3. 全局变量泄漏：newBookAdd 未使用声明关键字，成为全局变量，存在潜在风险。

修正后的完整代码 #

JavaScript 部分

// 初始化书架数据：若 localStorage 无数据则设为空数组
let retrieveBookShelf = localStorage.getItem("storedbookShelf");
let bookShelf = retrieveBookShelf ? JSON.parse(retrieveBookShelf) : [];

const
  shelf = document.getElementById('shelf'),
  addBookBtn = document.getElementById('add-book'),
  myForm = document.getElementById('form'),
  submitFormBtn = document.getElementById('submitform'),
  booksElms = [];

class BookDetails {
  constructor(title) {
    this.title = title;
  }
}

// 渲染书架数据到页面
function renderBooks() {
  shelf.innerHTML = ''; // 清空现有书架元素
  booksElms.length = 0; // 重置书籍元素数组
  
  bookShelf.forEach(book => {
    let bookElm = document.createElement('div');
    bookElm.classList.add('book');
    bookElm.textContent = book.title;
    shelf.appendChild(bookElm);
    booksElms.push(bookElm);
  });
}

// 页面加载时渲染已保存的书籍
renderBooks();

addBookBtn.addEventListener('click', () => {
  let book = document.createElement('div');
  book.classList.add('book');
  shelf.appendChild(book);
  booksElms.push(book);
});

myForm.addEventListener('submit', e => {
  e.preventDefault();
  const title = document.getElementById("booktitle").value;
  
  // 找到第一个空书籍元素并填充标题
  const emptyBook = booksElms.find(book => book.textContent === '');
  if (emptyBook) {
    emptyBook.textContent = title;
  }
  
  // 创建新书籍对象并保存到 localStorage
  const newBookAdd = new BookDetails(title);
  bookShelf.push(newBookAdd);
  localStorage.setItem("storedbookShelf", JSON.stringify(bookShelf));
  
  // 清空输入框
  myForm.booktitle.value = '';
});

CSS 部分（无修改）

#shelf {
    height: 150px;
    border-bottom: 5px solid #000;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(25px,40px));
    align-items: end;
  margin-bottom: 15px;
}

.book {
    border: 1px solid #000;
    height: 100px;
    width:25px;
    display: inline-block;
  padding-top: 5px;
    writing-mode: vertical-rl;
    font-family: 'Roboto', sans-serif;
}

#add-book {
  margin-bottom: 15px;
}

HTML 部分（无修改）

<div id="bookshelf">
  <div id="shelf"></div>
</div>

<button id="add-book">+</button>

<form id="form">
  <label for="booktitle">Book Title</label><br>
  <input type="text" id="booktitle" name="booktitle"><br>
  <input type="submit" id="submitform" value="Submit">
</form>

关键修改说明 #

1. 初始化 bookShelf：使用三元运算符判断，若 localStorage 无数据则初始化为空数组，避免 null 导致的错误。
2. 新增 renderBooks 函数：遍历 bookShelf 数组，为每个书籍创建对应的 DOM 元素并添加到书架，页面加载时自动调用该函数恢复数据。
3. 优化表单提交逻辑：使用 find 方法仅填充第一个空书籍元素，避免多个空书籍被设置为同一标题；添加输入框清空操作提升用户体验；使用 const 声明变量避免全局泄漏。
4. 移除无用变量：删除未使用的 formDiv 变量，精简代码。

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