本文介绍如何通过封装 localstorage 操作逻辑，彻底避免因空字符串或无效值导致的待办列表渲染异常，确保每次读取都返回合法数组，并在保存前自动过滤空值。
本文介绍如何通过封装 localstorage 操作逻辑，彻底避免因空字符串或无效值导致的待办列表渲染异常，确保每次读取都返回合法数组，并在保存前自动过滤空值。
在 Web 应用中，直接操作 localStorage 容易因边界情况（如写入空字符串 ''、null 或损坏的 JSON）引发运行时错误或 UI 异常——正如你在刷新页面后看到的空白待办项。根本原因在于：localStorage.setItem('todos', '') 是合法操作，但后续 JSON.parse('') 会抛出 SyntaxError；同时，原始代码中未对新增 todo 值做空值校验，导致空字符串被无条件推入数组。
✅ 推荐解决方案：封装健壮的存储工具函数
我们应将 localStorage 的读/写逻辑抽象为高内聚、容错性强的工具函数，核心原则是：
- 读取时默认兜底：无论 getItem 返回 null、'' 还是非法 JSON，统一返回 []；
- 写入前严格校验：仅当 todo 非空（非 null、非 undefined、非纯空白字符串）才存入；
- 避免重复解析：复用解析结果，减少冗余 JSON.parse 调用。
以下是优化后的完整实现：
// ✅ 安全读取 todos 数组（自动处理 null/empty/corrupted）
const getTodosInStorage = () => {
const raw = localStorage.getItem('todos');
try {
return raw && raw.trim() !== '' ? JSON.parse(raw) : [];
} catch (e) {
console.warn('Invalid JSON in localStorage["todos"], resetting to []', e);
localStorage.removeItem('todos'); // 清理损坏数据
return [];
}
};
// ✅ 安全保存 todo（自动过滤空值 + 类型保护）
const saveLocalTodos = (todo) => {
if (todo == null || typeof todo !== 'string' || todo.trim() === '') {
console.debug('Ignored empty/invalid todo:', todo);
return;
}
const currentTodos = getTodosInStorage();
const updatedTodos = [...currentTodos, todo.trim()]; // 可选：自动去首尾空格
localStorage.setItem('todos', JSON.stringify(updatedTodos));
};
// ✅ 页面加载时初始化（无需手动检查空字符串）
window.onload = () => {
const todos = getTodosInStorage();
// ✅ 此处 todos 必为合法数组，可直接渲染
renderTodoList(todos); // 你的渲染函数
};
⚠️ 关键注意事项
- 永远不要直接 JSON.parse(localStorage.getItem(...))：必须包裹 try...catch，否则非法 JSON 会导致脚本中断；
- 空字符串 '' ≠ null：localStorage.getItem('key') 在 key 不存在时返回 null，但若曾执行 setItem('key', '')，则返回 '' —— 二者均需统一处理；
- 主动清理比被动防御更可靠：在 getTodosInStorage 中检测到损坏数据时，建议 removeItem 并记录日志，防止问题累积；
- 扩展性提示：如需支持对象型 todo（如 {id, text, completed}），只需在 saveLocalTodos 中增加类型校验和结构验证。
通过以上重构，你不仅彻底消除了空字符串污染 localStorage 的风险，还建立了可维护、可测试、面向错误的设计范式——这才是前端本地存储的最佳实践。
