本文详解如何利用 localStorage 实现按“月+周”组合精准保存和恢复动态生成的 <li> 列表数据，解决切换选项时误清历史内容的问题，并提供可直接集成的健壮代码方案。
本文详解如何利用 localstorage 实现按“月+周”组合精准保存和恢复动态生成的 `
在构建日程管理类交互界面（如周计划/月计划输入面板）时，一个常见需求是：用户在“January – Week 1”下添加的待办事项（如 <li>Hello</li>），切换至“February – Week 1”后应被清空以提供干净输入环境，但返回原选项时必须完整还原此前输入。然而，许多开发者遇到的问题是：数据仅被清除，却未真正持久化保存——根源在于 saveData 与 loadData 的键设计不一致、clearData 逻辑过于粗暴（全局清空），以及加载时机不当。
✅ 正确的数据建模：统一键命名规范
关键前提是确保 保存、加载、清除三者使用完全一致的 key 结构。推荐采用以下格式作为唯一标识符：
const month = document.getElementById('select-month').value; // e.g., "January"
const week = document.getElementById('select-week').value; // e.g., "Week 1"
const dayIndex = dayElement.getAttribute('data-day'); // e.g., "1"
const key = `${month}-${week}-${dayIndex}`; // ✅ 统一格式，无空格/特殊符号，兼容 localStorage key⚠️ 原代码中存在两个隐患：
- 键名含空格与不可见换行符（如 `${month} - ${week} - $ { dayIndex }\n`），导致 savedData[key] 匹配失败；
- loadData() 中尝试读取 savedData[${month} - ${week}]（缺少 -dayIndex），与保存结构不匹配，必然返回 undefined。
✅ 安全的清除逻辑：按范围精准擦除
clearData() 不应清空整个 DOM 或全部 localStorage，而应仅移除当前“月+周”组合对应的所有 <li> 元素，同时保留其他组合数据完好。优化后的实现如下：
const clearData = () => {
const month = document.getElementById('select-month').value;
const week = document.getElementById('select-week').value;
const keyPrefix = `${month}-${week}-`; // 注意末尾的 `-`
document.querySelectorAll('.day').forEach(dayElement => {
const dayIndex = dayElement.getAttribute('data-day');
const targetKey = keyPrefix + dayIndex;
// 清空该 day 下 ul 的所有 li，但不触碰其他数据
const ul = dayElement.querySelector('ul');
ul.innerHTML = '';
// 可选：标记当前上下文，便于调试或扩展
ul.dataset.key = targetKey;
});
// 立即保存空状态（确保 localStorage 同步）
saveData();
};✅ 可靠的数据加载流程：时机 + 键对齐
loadData() 必须在 DOM 更新（如 updateDayTitles()）之后执行，且严格使用与 saveData() 完全一致的 key 生成逻辑：
const loadData = () => {
const savedData = JSON.parse(localStorage.getItem('scheduleData')) || {};
const month = document.getElementById('select-month').value;
const week = document.getElementById('select-week').value;
document.querySelectorAll('.day').forEach(dayElement => {
const dayIndex = dayElement.getAttribute('data-day');
const key = `${month}-${week}-${dayIndex}`; // ✅ 与 saveData 完全一致
const values = savedData[key] || [];
const ul = dayElement.querySelector('ul');
values.forEach(value => {
const li = document.createElement('li');
li.innerHTML = value;
// 添加删除按钮（×）
const span = document.createElement('span');
span.innerHTML = '×';
span.className = 'delete-btn'; // 推荐加 class 便于 CSS 控制
span.addEventListener('click', (e) => {
e.stopPropagation();
li.remove();
saveData(); // 每次变更立即持久化
});
// 添加完成态切换
li.addEventListener('click', () => li.classList.toggle('checked'));
li.appendChild(span);
ul.appendChild(li);
});
});
};✅ 完整事件绑定：确保流程闭环
在月份/周次下拉框的 change 事件中，严格按序执行：清除 → 更新视图 → 加载数据：
const selectMonth = document.getElementById('select-month');
const selectWeek = document.getElementById('select-week');
selectMonth.addEventListener('change', () => {
clearData();
updateDayTitles(); // 你的函数：更新 .day-title 文本等
loadData();
});
selectWeek.addEventListener('change', () => {
clearData();
updateDayTitles();
loadData();
});? 补充建议与注意事项
- 初始化防护：首次加载页面时，若 select-month/select-week 尚未选择，loadData() 应跳过或提供默认值，避免 undefined 错误；
- 数据清理：可增加「重置全部」按钮，调用 localStorage.removeItem('scheduleData')；
- 异常处理：JSON.parse() 应包裹 try...catch，防止 localStorage 数据损坏导致脚本中断；
- 性能优化：若日程项极多，考虑节流 saveData() 调用（如防抖 300ms），但本场景通常无需；
- 可访问性：为删除按钮添加 aria-label="Delete item"，提升无障碍体验。
通过以上结构化改造，你将获得一个健壮、可预测、符合用户直觉的日程数据持久化系统——切换即隔离，返回即还原，真正实现“所见即所存”。
