如何从LocalStorage中提取JSON对象的特定属性值？

怎么说呢，

在前端开发中。往往需要把复杂的数据结构保存在浏览器的本地存储里。其实，最常用的方式就是把它们转换成 JSON 字符串存入 localStorage。但当你想从中取出一个特定属性时往往会遇到两大痛点：

• ①“我已经把数据存进了 localStorage，但怎么只拿到某个字段？”
• ②“如果属性不存在怎么办？我不想因为错误而导致页面崩溃。”

下面将一步步拆解方法，并给出完整可直接拷贝的代码。话说回来，

理解 LocalStorage 与 JSON 的关系

LocalStorage 是浏览器提供的持久化键值存储。只能保存字符串，要保存 JavaScript 对象，就必须先通过 JSON.stringify 把它转成字符串；说起来，读取时再用 JSON.parse 转回对象。

为什么要使用 JSON？

JSON 是一种轻量级的数据交换格式。既易于人读写，也易于机器解析。它可以让我们在本地存储中保持对象结构，而不是失去层级信息。

将对象存入 LocalStorage

假设我们有一个使用者信息对象：

const user = {
name这方面。'John',age: 30,email: ''
};localStorage.setItem);

痛点提醒： 如果直接写成 alert);怎么说呢， 会报错，因为你没把键名传进去；记得一定要先把字符串传给 .setItem.

从 LocalStorage 中读取并解析为对象

痛点提醒： 很多人忘记检查返回值是否为 null;如果键不存在.getItem 会返回 null,后面调用 .parse 就会抛异常。

const storedData = localStorage.getItem;if {
console.warn;} else {
const userObj = JSON.parse;}

提取特定属性值——更安全的做法

You can simply use dot notation:

const name = userObj?.name，?'匿名'，const age = userObj?.age，?'未知'，console.log;

痛点提醒： 若你不加可选链，当属性缺失时可能得到 undefined" " " );

// Simulate click button.dispatchEvent);

// Expect navigation expect.toHaveBeenCalledWith;})，

---

✅ 小结

• 获取localStorage.getItem → JSON.parse
• 提取使用 obj.prop 或 obj 并加上安全检查
• 更新修改属性后重新 JSON.stringify 并 setItem
• 错误处理始终检查 null、undefined 并使用可选链/空值合并避免异常

这样。你就能轻松、稳妥地从本地存储里提取任何 JSON 对象的属性，而不会因为缺失字段或类型错误导致页面崩溃。祝编码愉快 🚀