如何从localStorage中获取嵌套对象的值

核心逻辑 #

要获取嵌套对象的值，关键是先把LocalStorage存储的JSON字符串解析为JavaScript对象，再通过属性链直接访问嵌套属性。

修正存储逻辑（避免双重转义） #

先确认data.metadata的类型，避免重复转义导致后续解析异常：

• 如果data.metadata是原生JavaScript对象，用JSON.stringify转换后存储；
• 如果data.metadata已经是字符串化的JSON，直接存入，不要再次调用JSON.stringify。

情况1：data.metadata是对象

// 示例数据对象
const data = {
  metadata: {
    receiver: { name: "John" },
    document: { type: "Sample doc" },
    issuer: { signatory: "Admin2" }
  }
};

// 正确存储：对象转JSON字符串
localStorage.setItem('metadata', JSON.stringify(data.metadata));

情况2：data.metadata是字符串化的JSON

// 示例字符串化的JSON（对应你提供的示例数据）
const data = {
  metadata: '{"receiver":{"name":"John"},"document":{"type":"Sample doc"},"issuer":{"signatory":"Admin2"}}'
};

// 正确存储：直接存入字符串，无需再次转义
localStorage.setItem('metadata', data.metadata);

获取嵌套值的代码实现 #

取出存储的字符串并解析为对象后，通过.操作符链式访问目标属性：

// 从LocalStorage取出字符串
const metadataStr = localStorage.getItem('metadata');

// 解析为JavaScript对象（如果之前误操作双重转义，需用JSON.parse(JSON.parse(metadataStr))）
const metadata = JSON.parse(metadataStr);

// 获取目标值
const userName = metadata.receiver.name; // John
const docType = metadata.document.type; // Sample doc
const signatoryName = metadata.issuer.signatory; // Admin2

console.log(userName, docType, signatoryName);

健壮性优化（避免报错） #

针对LocalStorage无数据、解析失败或属性不存在的场景，加入异常处理和可选链操作：

const metadataStr = localStorage.getItem('metadata');

if (metadataStr) {
  try {
    const metadata = JSON.parse(metadataStr);
    // 可选链操作符?.避免属性不存在时抛出错误，??设置默认值
    const userName = metadata?.receiver?.name ?? '未获取到用户名';
    const docType = metadata?.document?.type ?? '未获取到文档类型';
    const signatoryName = metadata?.issuer?.signatory ?? '未获取到签署人';
    
    console.log(userName, docType, signatoryName);
  } catch (error) {
    console.error('解析metadata失败:', error);
  }
} else {
  console.log('LocalStorage中未找到metadata项');
}

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