如何从浏览器开发者工具提取LocalStorage中显示为[object Object]的JSON对象

嘿，这个问题我之前调试的时候也碰到过！别着急，分两种情况给你说解决方案：

情况一：存储的是完整JSON字符串，只是显示问题 #

这种情况最常见，因为LocalStorage只能存字符串，正常存储JSON对象时都会用JSON.stringify()转成字符串，但有时候浏览器开发者工具的显示会让你误以为是[object Object]，其实背后是完整的JSON数据。你可以用这两个方法提取：

• 控制台直接解析
  打开开发者工具的「Console」面板，输入下面的代码（把"yourKey"替换成你实际的LocalStorage键名）：

  const rawData = localStorage.getItem("yourKey");
  const parsedData = JSON.parse(rawData);
  console.log(parsedData);
  

  回车后，控制台会显示可展开的对象，点击箭头就能查看所有属性和值啦。

• 复制原始值解析

  1. 切换到「Application」面板，找到LocalStorage下对应的键
  2. 右键点击显示为[object Object]的值，选择「Copy value」
  3. 回到Console面板，输入JSON.parse(粘贴的内容)，回车就能看到完整的对象结构。

情况二：存储时未正确序列化对象（数据已丢失） #

如果你是直接把对象存进LocalStorage（比如localStorage.setItem("yourKey", yourObject)），浏览器会自动把对象转成字符串"[object Object]"——这种情况下原始数据已经丢失，没办法恢复了。

⚠️ 下次存储对象时一定要记得用JSON.stringify()序列化：

localStorage.setItem("yourKey", JSON.stringify(yourObject));

取数据的时候再用JSON.parse()还原，就不会再出现这种问题啦。

额外小技巧 #

在Chrome控制台里，解析完对象后右键点击它，选择「Copy object」，可以直接把对象复制成格式化后的JSON字符串，方便你保存或者进一步处理。

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