如何在Local Storage中存储预算列表数组？遇JSON解析错误求助

问题核心 #

当前代码仅能存储单个预算项，后续新增会覆盖原有数据；读取时未处理初始无存储数据的场景，导致JSON解析失败。

修正后的完整JS代码 #

// 读取存储的预算数组，处理初始无数据情况
function getBudgetItems() {
  const storedData = localStorage.getItem('budgetItems');
  // 无存储数据则返回空数组，避免JSON.parse解析null报错
  return storedData ? JSON.parse(storedData) : [];
}

// 新增预算项并写入Local Storage
function saveBudgetItem(newItem) {
  const budgetList = getBudgetItems();
  // 将新项追加到数组
  budgetList.push(newItem);
  // 转为JSON字符串存储（Local Storage仅支持字符串格式）
  localStorage.setItem('budgetItems', JSON.stringify(budgetList));
}

// 示例调用
// 创建测试预算项
const testItem = { id: Date.now(), category: "交通", amount: 200, date: new Date().toISOString() };
// 存储
saveBudgetItem(testItem);
// 读取并验证
console.log(getBudgetItems());

关键修复点 #

• 初始数据兼容：读取时先判断存储内容是否存在，不存在则返回空数组，避免JSON.parse(null)触发语法错误。
• 数组存储逻辑：每次新增时先取出已有数组，追加新元素后重新存入，而非直接覆盖单个对象。
• JSON格式规范：严格使用JSON.stringify序列化数组，JSON.parse反序列化，保证存储内容格式合法。

额外排查建议 #

若仍出现JSON错误：

• 执行localStorage.removeItem('budgetItems')清空旧的非法存储数据，重新测试。
• 确保存入的预算项仅包含JSON可序列化类型（排除函数、Symbol、循环引用对象等）。

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