本文详解在 Todo 列表应用中，因误用 span.value 导致 localStorage 存储为 "null" 的根本原因，并提供基于 innerHTML 的正确数据提取方案、完整修复代码及关键注意事项。
本文详解在 todo 列表应用中，因误用 `span.value` 导致 localstorage 存储为 `"null"` 的根本原因，并提供基于 `innerhtml` 的正确数据提取方案、完整修复代码及关键注意事项。
在构建基于浏览器本地存储的 Todo 应用时，一个常见但易被忽视的错误是：试图通过 .value 属性读取 元素的内容。由于 是纯内容容器元素（phrasing content），它不支持 value 属性（该属性仅适用于表单控件如 、
✅ 正确做法：使用 textContent 或 innerHTML
对于 待办事项 这类包裹文本的元素，应使用：
- element.textContent：安全、高效，仅获取纯文本（推荐，防 XSS）；
- element.innerHTML：获取含 HTML 标签的字符串（仅当内容含动态标签且可信时使用）。
在本例中，Todo 项内容为纯文本，因此优先推荐 textContent。
? 修复后的完整 save() 函数
function save() {
const liItems = document.querySelectorAll('li span');
const data = []; // 使用 const 声明，避免全局污染
liItems.forEach(span => {
data.push(span.textContent); // ✅ 关键修正：用 textContent 替代 value
});
localStorage.setItem('todoItems', JSON.stringify(data));
console.log('已保存至 localStorage:', data);
}? 小提示：将键名从 "liItem" 改为 "todoItems" 更具语义性，便于维护与调试。
? 其他关键优化建议
-
初始化逻辑需加空值校验：JSON.parse(localStorage.getItem(...)) 可能返回 null（如首次运行），直接 .forEach() 会报错。应增加防护：
(function () { const saved = localStorage.getItem('todoItems'); if (saved) { try { const lsItems = JSON.parse(saved); lsItems.forEach(item => addToDo(item)); } catch (e) { console.warn('localStorage 数据解析失败:', e); } } })(); 避免重复执行 save()：原代码在 addToDo() 结尾和页面加载时各调用一次 save()，但初始化时 DOM 尚未渲染完成，可能导致空数组覆盖。应确保 save() 仅在数据真实变更后调用（当前逻辑合理），但初始化部分必须在 DOM 加载后执行（建议包裹在 DOMContentLoaded 中）。
-
使用现代语法提升健壮性：
// 替代 querySelectorAll + forEach，更简洁 const data = Array.from(document.querySelectorAll('li span')) .map(span => span.textContent);
✅ 最终验证效果
修复后，输入 “买牛奶” → 按 Enter → 页面显示、localStorage 存储 ["买牛奶"] → 刷新页面 → 自动还原列表，且控制台输出为真实字符串，不再出现 "null"。
总结：DOM 元素属性不可混用——value 属于表单控件，textContent/innerHTML 才是内容型元素的正确访问方式。养成检查元素类型与 API 文档的习惯，是规避此类“静默失败”的关键。
