本文详解在 Todo 应用中使用 localStorage 持久化数据时，因误用 span.value 导致存储为 null 的根本原因，并提供基于 innerHTML 的正确读取方案及完整可运行修复代码。
本文详解在 todo 应用中使用 localstorage 持久化数据时，因误用 `span.value` 导致存储为 `null` 的根本原因，并提供基于 `innerhtml` 的正确读取方案及完整可运行修复代码。
在构建基于浏览器的待办事项（Todo List）应用时，常需借助 localStorage 实现页面刷新后数据不丢失。但一个高频错误是：试图从 元素读取 .value 属性——而 是纯内容容器，既无原生 value 属性，也未手动设置 data-value，因此 liItem.value 始终返回 undefined，经 JSON.stringify 后存入 localStorage 的实际是 "null" 字符串数组，最终导致恢复时显示异常。
✅ 正确做法：用 textContent 或 innerHTML 提取文本
由于待办项内容通过 ${item} 插入，其文本内容应通过 liItem.textContent（推荐，更安全）或 liItem.innerHTML（适用于含简单 HTML 的场景）获取。二者区别如下：
- textContent：仅返回纯文本，自动转义 HTML 标签，防 XSS，语义清晰；
- innerHTML：返回包含 HTML 的字符串，若用户输入含 <script> 等标签可能引发安全风险（本例中输入来自可控表单，风险较低，但仍建议优先 textContent）。</script>
以下是修复后的完整 save() 函数：
function save() {
const liItems = document.querySelectorAll('li span');
const data = [];
liItems.forEach(span => {
data.push(span.textContent); // ✅ 正确：获取 span 内纯文本
});
localStorage.setItem('liItem', JSON.stringify(data));
console.log('已保存至 localStorage:', data);
}? 其他关键优化点
避免全局变量污染：原代码中 data = [] 未声明 var/let/const，属隐式全局变量。修复后使用 const data = [] 显式声明，提升可维护性。
初始化逻辑需容错处理：localStorage.getItem("liItem") 可能返回 null（首次访问），直接 JSON.parse(null) 会抛出错误。应在恢复前校验：
(function () {
const savedData = localStorage.getItem('liItem');
if (savedData) {
try {
const lsItems = JSON.parse(savedData);
lsItems.forEach(item => addToDo(item));
} catch (e) {
console.warn('localStorage 数据解析失败:', e);
}
}
})();- 事件监听器位置优化：save() 调用位于 addToDo 函数末尾，确保每次新增条目后立即持久化；同时在页面加载时主动调用一次 save()（如原代码末尾的 save();），保证初始 DOM 状态同步（尤其当页面有预置 HTML 列表时）。
? 总结
| 错误写法 | 正确写法 | 原因 |
|---|---|---|
| liItem.value | liItem.textContent | 无 value 属性，textContent 安全获取文本内容 |
| data = []（隐式全局） | const data = [] | 防止变量污染，符合现代 JavaScript 规范 |
| JSON.parse(localStorage.getItem(...)) 无校验 | 先判空再 try/catch 解析 | 避免 null 解析报错，提升健壮性 |
通过以上修正，你的 Todo 应用即可稳定地将用户输入的待办文本存入 localStorage，并在刷新后准确还原——不再出现 "null" 占位问题，真正实现数据的可靠持久化。
