如何从Local Storage重新加载Todo卡片Div？

核心问题 #

你的代码存在两个关键错误：

• 从localStorage读取数据时，没有解析JSON字符串，直接调用storedValue.innerHTML会得到undefined（因为storedValue是JSON格式的字符串，不是对象）
• 错误使用outerHTML：设置元素的outerHTML会直接替换当前元素本身，导致后续appendChild操作无效

修正步骤 #

1. 修复读取逻辑（DOMContentLoaded事件）

将读取代码修改为：

document.addEventListener('DOMContentLoaded', function(event) {
  const toDosContainer = document.getElementById('你的容器ID'); // 替换为实际容器ID
  for (let i = 0; i < localStorage.length; i++) {
    const storedKey = localStorage.key(i);
    // 先解析JSON字符串为对象
    const storedData = JSON.parse(localStorage.getItem(storedKey));
    
    // 直接使用outerHTML插入到容器，完整还原卡片结构
    toDosContainer.insertAdjacentHTML('beforeend', storedData.outerHTML);
  }
});

2. 优化存储逻辑（避免重复覆盖）

当前用toDo.name作为key，容易出现重复覆盖的问题，建议改用唯一标识作为key（比如时间戳）：

// 新增卡片时的存储代码
function saveTodoCard(todosCard) {
  // 生成唯一key，避免不同卡片互相覆盖
  const uniqueKey = `todo_${Date.now()}`; 
  localStorage.setItem(uniqueKey, JSON.stringify({
    outerHTML: todosCard.outerHTML
  }));
}

3. 确保新增卡片正常保存

每次创建新的Todo卡片后，调用上述saveTodoCard函数，确保新卡片被存入localStorage，刷新后就能自动加载。

额外提示 #

如果需要支持卡片修改、删除功能，建议优先存储Todo的数据对象（比如{name: 'xxx', completed: false}），再根据数据重新渲染卡片，这样比直接存HTML更灵活，还能避免事件绑定丢失、样式错乱等问题。

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