如何用LocalStorage的JSON数据重新填充UL列表？解决undefined问题

你遇到的问题核心是：DOM元素对象不能直接用JSON.stringify()序列化存储。因为DOM元素包含大量浏览器内部的私有属性、方法，JSON只能处理普通的JavaScript对象（比如字符串、数字、数组、简单对象），直接序列化DOM元素会得到空对象或者无效数据，解析后自然显示undefined。

正确的做法是存储列表的数据源信息，而不是DOM元素本身，之后在目标页面根据数据源重新生成DOM结构。

一、修改存储逻辑（原页面） #

不再直接存储UL元素，而是收集每个列表项的关键数据（比如链接文本、跳转地址），存成数组后再序列化：

// 创建新列表项的逻辑保留
let item = document.createElement('li');
let a = document.createElement('a');
a.textContent = "New Item";
a.setAttribute('href', "javascript:functionName()");

let itemList = document.getElementById('inventory');
item.appendChild(a);
itemList.appendChild(item);

// 收集所有列表项的数据
const inventoryItems = Array.from(itemList.querySelectorAll('li a')).map(link => ({
  text: link.textContent,
  href: link.getAttribute('href')
}));

// 存储到localStorage
localStorage.setItem("inventoryItems", JSON.stringify(inventoryItems));

二、修改读取重建逻辑（目标页面） #

从localStorage取出数据后，遍历数组逐个创建DOM元素，添加到目标UL中：

// 取出存储的数据
const savedItems = JSON.parse(localStorage.getItem("inventoryItems")) || [];
const targetList = document.getElementById("testHTML");

// 遍历数据，重新生成列表项
savedItems.forEach(itemData => {
  let li = document.createElement('li');
  let a = document.createElement('a');
  a.textContent = itemData.text;
  a.setAttribute('href', itemData.href);
  li.appendChild(a);
  targetList.appendChild(li);
});

额外说明 #

• 如果你需要存储更多信息（比如列表项的样式、自定义属性），只需要在收集数据时把对应的属性加入到对象里即可。
• 注意localStorage只能存储字符串，所以必须用JSON.stringify()和JSON.parse()来处理数组/对象。

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