本文介绍如何通过健壮的读写封装，彻底避免 localstorage 中存入空字符串或无效 json，防止页面刷新后渲染出空待办项，并提供可复用的工具函数与最佳实践。
本文介绍如何通过健壮的读写封装，彻底避免 localstorage 中存入空字符串或无效 json，防止页面刷新后渲染出空待办项，并提供可复用的工具函数与最佳实践。
在前端开发中，localStorage 是持久化保存用户数据（如待办事项列表）的常用方案，但若缺乏对边界情况的处理，极易因空字符串（''）、null 或非法 JSON 导致逻辑异常——例如每次刷新页面都向列表中插入空元素，破坏 UI 一致性。
根本问题在于原始代码中未校验 todo 内容的有效性，且 saveLocalTodos() 直接 push() 未经过滤的数据；同时 window.onload 中的读取逻辑存在语法错误（多了一个 else 分支）、未清理残留空值，也未对反序列化失败做兜底处理。
✅ 正确做法是：将 localStorage 的读写抽象为受控接口，统一处理空值、解析异常与默认值。以下是优化后的完整实现：
// ✅ 安全读取 todos 数组：自动处理 null、空字符串、解析失败
const getTodosInStorage = () => {
const raw = localStorage.getItem('todos');
if (!raw || raw.trim() === '') return [];
try {
const parsed = JSON.parse(raw);
return Array.isArray(parsed) ? parsed : [];
} catch (e) {
console.warn('Invalid JSON in localStorage["todos"], resetting to empty array.', e);
localStorage.removeItem('todos'); // 清理损坏数据
return [];
}
};
// ✅ 安全写入：仅当 todo 非空且为合法值时才保存
const saveLocalTodos = (todo) => {
if (todo === null || todo === undefined || String(todo).trim() === '') {
console.debug('Ignored empty/invalid todo:', todo);
return;
}
const currentTodos = getTodosInStorage();
const updatedTodos = [...currentTodos, String(todo).trim()];
localStorage.setItem('todos', JSON.stringify(updatedTodos));
};
// ✅ 页面加载时初始化：直接获取干净数组，无需手动清理
window.onload = () => {
const todos = getTodosInStorage();
// ✅ 此时 todos 必为有效数组，可安全用于渲染
renderTodoList(todos); // 假设你有渲染函数
};
? 关键改进点说明：
- 防御性解析：getTodosInStorage() 主动拦截 null、空字符串、JSON 解析异常，并静默降级为空数组，避免运行时崩溃；
- 写入前校验：saveLocalTodos() 拒绝空字符串、null、undefined 及纯空白字符，从源头杜绝脏数据；
- 自动修复机制：解析失败时主动 removeItem()，防止后续持续报错；
- 无状态设计：所有函数不依赖外部变量，可独立测试与复用。
⚠️ 注意事项：
- 不要直接操作 localStorage.setItem('todos', '') 或 localStorage.setItem('todos', '[]') —— 后者虽合法，但前者会留下难以检测的空字符串陷阱；
- 若需清空全部待办，应调用 localStorage.removeItem('todos')，而非设为空字符串；
- 在生产环境建议配合 try/catch + 错误监控（如 Sentry），捕获罕见的 QuotaExceededError 等存储异常。
通过以上封装，你将获得一个自愈、健壮、语义清晰的本地存储层——从此告别“刷新即新增空项”的顽疾，让 localStorage 真正成为可靠的数据伙伴。
