JSON.parse解析Local Storage数据失败，页面显示[object Object]

云上老周

2026-6-23

问题分析与解决

1. 修复Local Storage的对象嵌套问题

你提到的fruitCake.push({Cake})是核心问题之一——ES6的对象简写语法{Cake}会生成嵌套结构：{Cake: 你的Cake实例}，导致存入Local Storage的数组全是嵌套对象，后续解析后也无法直接读取有效数据。

修正写法：直接push原始的Cake对象，不要额外包裹：

// 错误写法
fruitCake.push({Cake})
// 正确写法
fruitCake.push(Cake)

存入Local Storage时保持正常序列化逻辑：

localStorage.setItem('fruitCakes', JSON.stringify(fruitCake))

2. 修复渲染时显示[object Object]的问题

renderTaskList直接把数组元素（对象）赋值给li.textContent，浏览器会默认将对象转为字符串[object Object]。你需要提取对象的具体属性值来展示。

假设你的Cake对象包含name（蛋糕名称）、flavor（口味）这类属性，修正渲染逻辑：

function renderTaskList() {
  const list = document.getElementById('task-list')
  list.innerHTML = ''
  // 读取并解析Local Storage中的数据，空值时返回空数组
  const savedCakes = JSON.parse(localStorage.getItem('fruitCakes')) || []
  savedCakes.forEach(cake => {
    const li = document.createElement('li')
    // 提取属性拼接成可读文本
    li.textContent = `${cake.name} - ${cake.flavor}`
    list.appendChild(li)
  })
}