本文介绍一种健壮的 localstorage 数据管理策略，通过封装读写逻辑自动过滤空值，确保 todos 数组始终为有效 json 数组，杜绝因空字符串导致的渲染异常。
本文介绍一种健壮的 localstorage 数据管理策略，通过封装读写逻辑自动过滤空值，确保 todos 数组始终为有效 json 数组，杜绝因空字符串导致的渲染异常。
在 Web 应用中，直接操作 localStorage 容易因边界情况（如存储空字符串 ''、null 或损坏的 JSON）引发运行时错误或 UI 异常——正如你在刷新页面后看到的空元素问题。根本原因在于：localStorage.setItem('todos', '') 是合法操作，但后续 JSON.parse('') 会抛出语法错误；而未加防护的 getItem() 返回 null 或 '' 时，若直接解析，会导致脚本中断或数组结构错乱。
✅ 推荐方案：统一数据入口 + 防御性解析
我们应将 localStorage 的读写逻辑抽象为受控函数，确保无论底层存的是 null、空字符串还是有效 JSON，对外始终返回一个干净的 Array
// ✅ 安全读取：始终返回数组，自动处理 null/empty/invalid
const getTodosInStorage = () => {
const raw = localStorage.getItem('todos');
try {
return raw && raw.trim() !== '' ? JSON.parse(raw) : [];
} catch (e) {
console.warn('Invalid todos in localStorage, resetting to []', e);
localStorage.removeItem('todos'); // 清理脏数据
return [];
}
};
// ✅ 安全写入：仅存有效 JSON 字符串，拒绝空值/非法结构
const saveLocalTodos = (todo) => {
if (todo === null || todo === undefined || String(todo).trim() === '') {
console.warn('Attempted to save empty/invalid todo — skipped');
return;
}
const current = getTodosInStorage();
const updated = [...current, todo];
localStorage.setItem('todos', JSON.stringify(updated));
};
? 初始化与使用示例
在页面加载时，直接调用 getTodosInStorage() 获取可靠数据，无需手动校验：
window.onload = () => {
const todos = getTodosInStorage();
// ✅ 安全渲染：todos 确保为数组，可直接遍历
todos.forEach(todo => {
const el = document.createElement('li');
el.textContent = todo;
document.getElementById('todo-list').appendChild(el);
});
};
// ✅ 添加新待办（自动过滤空内容）
document.getElementById('add-btn').addEventListener('click', () => {
const input = document.getElementById('todo-input');
saveLocalTodos(input.value.trim()); // 注意：先 trim 再存
input.value = '';
});
⚠️ 关键注意事项
- 永远不要直接 JSON.parse(localStorage.getItem(...))：必须包裹 try...catch 或使用 getTodosInStorage 封装；
- 写入前做输入校验：saveLocalTodos 应拒绝空字符串、undefined、仅空白字符等无效值；
- 清理脏数据：当解析失败时，主动 removeItem 比保留无效状态更安全；
- 避免重复初始化逻辑：原代码中 window.onload 内重复了 getItem + parse，易出错且冗余，统一入口可彻底规避。
通过该模式，你不仅解决了空字符串污染问题，更建立了可维护、可测试、具备错误恢复能力的本地存储层——这才是生产环境应有的健壮实践。
