笔记应用LocalStorage解析报错：JSON位置30后存在非空白字符

问题根源 #

你的代码在存储笔记时犯了一个关键错误：

• 你将单个笔记对象JSON.stringify后推入objArray，然后直接把这个字符串数组传给localStorage.setItem。此时数组会被隐式转换为逗号分隔的字符串（比如"{"title":"笔记1","text":"内容1"},{"title":"笔记2","text":"内容2"}"），这不是合法的JSON数组格式（缺少首尾的[]）。
• 第一次提交时数组只有一个元素，转字符串后是单个合法JSON对象，所以JSON.parse能正常工作；但第二次添加后，字符串变成两个JSON对象直接拼接，违反JSON语法规则，因此报错Unexpected non-whitespace character after JSON at position 30。

修复后的代码 #

修改你的JavaScript逻辑，正确维护对象数组并统一序列化存储：

// 获取DOM元素
let title = document.getElementById("title");
let text = document.getElementById("text");
let form = document.getElementById("form");
let notes = document.getElementById("notes");

// 初始化笔记数组：优先从LocalStorage读取已有数据，没有则为空数组
let objArray = JSON.parse(localStorage.getItem("form")) || [];

// 渲染笔记到页面的函数
function renderNotes() {
  notes.innerHTML = "";
  objArray.forEach((note, index) => {
    const noteElement = document.createElement("div");
    noteElement.className = "note";
    noteElement.innerHTML = `
      <div class="note-title">${note.title}</div>
      <div class="note-t">${note.text}</div>
      <div class="note-btn">
        <button class="delete" onclick="deleteNote(${index})">删除</button>
        <button class="view">查看</button>
      </div>
    `;
    notes.appendChild(noteElement);
  });
}

// 页面加载时先渲染已有笔记
renderNotes();

// 表单提交事件
form.addEventListener("submit", function(e) {
  e.preventDefault();
  const data = new FormData(e.target);
  const noteObj = Object.fromEntries(data.entries());
  
  // 将新笔记对象直接推入数组
  objArray.push(noteObj);
  // 统一将整个数组序列化为JSON字符串后存储
  localStorage.setItem("form", JSON.stringify(objArray));
  
  // 清空表单并重新渲染笔记
  form.reset();
  renderNotes();
});

// 删除笔记函数
function deleteNote(index) {
  objArray.splice(index, 1);
  localStorage.setItem("form", JSON.stringify(objArray));
  renderNotes();
}

关键修改点 #

1. 初始化数组：页面加载时先从LocalStorage读取并解析已有数据，避免刷新后丢失之前的笔记。
2. 存储逻辑：不再单独序列化每个对象，而是直接维护对象数组，最后统一JSON.stringify整个数组再存入LocalStorage，确保存储的是合法的JSON数组格式。
3. 新增渲染函数：将笔记数组渲染到页面，让功能完整可用。
4. 删除功能：补充删除笔记的逻辑，同步更新LocalStorage和页面显示。

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