如何在网站不同区域调用localStorage中对象数组的id与name字段

步骤1：从localStorage获取并解析数组 #

localStorage仅支持存储字符串，所以需要先通过localStorage.getItem()取出存储的字符串，再用JSON.parse()转换为JavaScript对象数组。为避免未存储数据时报错，可默认赋值为空数组：

// 替换为你实际使用的存储键名
const storageKey = 'userList';
let storedArray = [];

try {
  // 解析存储的字符串为数组，无数据则用空数组
  storedArray = JSON.parse(localStorage.getItem(storageKey)) || [];
} catch (err) {
  console.error('解析localStorage数据出错:', err);
}

步骤2：遍历数组调用id和name字段 #

根据页面不同部分的需求，可通过遍历数组逐个访问每个对象的id和name，并渲染到对应位置：

示例1：逐个输出到控制台并插入指定DOM元素

storedArray.forEach(item => {
  // 输出到控制台调试
  console.log('ID:', item.id, '名称:', item.name);
  
  // 将id插入到页面指定元素（替换为你的DOM元素ID）
  document.getElementById('target-id').textContent = item.id;
  // 将name插入到另一指定元素
  document.getElementById('target-name').textContent = item.name;
});

示例2：批量渲染为页面列表

如果需要在页面某区域展示所有对象的id和name，可动态创建DOM元素：

const listContainer = document.getElementById('list-container');

storedArray.forEach(item => {
  const listItem = document.createElement('div');
  listItem.className = 'list-item';
  listItem.textContent = `ID: ${item.id} | 名称: ${item.name}`;
  listContainer.appendChild(listItem);
});

补充：确保数组正确存储到localStorage #

如果还未存储数组，需先用JSON.stringify()将数组转为字符串再存入：

const myArray = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
  { id: 3, name: 'Charlie' }
];
localStorage.setItem(storageKey, JSON.stringify(myArray));

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