如何从localStorage中单独获取JSON数据里的name或email字段

问题背景 #

给出的代码如下：

var testObject = { 'name': 1, 'email': 2, 'password': 3 };

// Put the object into storage
localStorage.setItem('testObject', JSON.stringify(testObject));

// Retrieve the object from storage
var retrievedObject = localStorage.getItem('testObject');

console.log('retrievedObject: ', JSON.parse(retrievedObject));

已将JSON对象存入localStorage并完成读取，如何单独提取并显示其中的name或email字段？

解决方案 #

核心是先把存储的JSON字符串解析为JavaScript对象，再通过对象属性访问方式获取指定字段，以下是几种常用写法：

1. 常规分步写法

先解析字符串为对象，再用点语法提取字段：

// 解析JSON字符串为JS对象
var parsedObject = JSON.parse(retrievedObject);

// 提取并显示name字段
console.log('name:', parsedObject.name);
// 提取并显示email字段
console.log('email:', parsedObject.email);

2. 方括号语法写法

如果属性名包含特殊字符（如空格、连字符）或需要动态获取属性时，用方括号语法更灵活：

var parsedObject = JSON.parse(retrievedObject);

console.log('name:', parsedObject['name']);
console.log('email:', parsedObject['email']);

3. 简化合并写法

如果不需要重复使用解析后的对象，可以直接在一行内完成解析和提取：

console.log('name:', JSON.parse(localStorage.getItem('testObject')).name);
console.log('email:', JSON.parse(localStorage.getItem('testObject')).email);

4. 容错处理（推荐）

实际开发中要考虑localStorage中不存在目标键的情况，避免解析null报错：

var storedData = localStorage.getItem('testObject');
if (storedData) {
  var parsedObject = JSON.parse(storedData);
  console.log('name:', parsedObject.name);
  console.log('email:', parsedObject.email);
} else {
  console.log('未找到存储的testObject数据');
}

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