本文详解如何基于月份与周次组合为每个工作日（如周一）独立保存和恢复 <li> 列表数据，避免切换周期时全局清空，实现“按周期隔离存储、按需精准加载”的 localStorage 管理方案。
本文详解如何基于月份与周次组合为每个工作日（如周一）独立保存和恢复 `
在构建动态日程管理界面（如按“月+周”切换的周计划表）时，一个常见痛点是：用户在“1月-第1周”的周一输入了若干待办事项（<li>），但当切换到“2月-第1周”后，所有内容被清空；而再次切回原周期时，数据却未恢复——看似调用了 saveData() 和 loadData()，实则因键名设计缺陷与生命周期调用时机错位，导致数据“只存不读”。
核心问题在于原始代码中 loadData() 依赖的 key 结构与 saveData() 不一致，且缺少对“清除逻辑”的精准控制：clearData() 若粗暴清空全部 <ul>，将破坏已保存的其他周期数据；而若完全不清理，则新周期会残留旧数据。因此，必须实现按周期前缀隔离操作。
✅ 正确的数据键名设计
应统一使用 month-week-dayIndex 作为唯一存储键（如 "January-1-1" 表示1月第1周周一），确保：
- 同一周期内各工作日数据互不干扰；
- 不同周期数据物理隔离；
- 加载时能精确匹配目标周期。
// ✅ 推荐的键生成方式（注意：移除多余空格，保持格式一致）
const month = selectMonth.value.trim();
const week = selectWeek.value.trim();
const dayIndex = dayElement.getAttribute('data-day');
const key = `${month}-${week}-${dayIndex}`; // 如 "January-1-1"✅ 安全的清除逻辑（关键修复）
clearData() 不应清空整个 DOM，而应仅重置当前周期对应的所有 <ul> 内容，并标记其归属键，为后续 loadData() 提供上下文依据：
const clearData = () => {
const month = document.getElementById('select-month').value.trim();
const week = document.getElementById('select-week').value.trim();
const keyPrefix = `${month}-${week}`;
document.querySelectorAll('.day').forEach(dayElement => {
const dayIndex = dayElement.getAttribute('data-day');
const key = `${keyPrefix}-${dayIndex}`;
const ul = dayElement.querySelector('ul');
// 清空内容，并记录当前周期键，便于后续加载识别
ul.innerHTML = '';
ul.setAttribute('data-key', key);
});
saveData(); // 立即持久化空状态，避免残留
};✅ 精准的加载流程（调用时机决定成败）
loadData() 必须在 DOM 更新完成之后 执行（例如 updateDayTitles() 后），否则 querySelector('ul') 可能找不到元素，或 data-key 尚未写入。推荐在下拉框事件中严格遵循三步序：
const selectMonth = document.getElementById('select-month');
const selectWeek = document.getElementById('select-week');
selectMonth.addEventListener('change', () => {
clearData(); // ① 清空当前周期占位
updateDayTitles(); // ② 同步更新标题（如"Monday → Jan 1–7"）
loadData(); // ③ 按新周期键加载对应数据
});
selectWeek.addEventListener('change', () => {
clearData();
updateDayTitles();
loadData();
});✅ 健壮的 loadData() 实现（含容错与交互还原）
以下为优化后的加载函数，支持自动重建删除按钮、勾选状态，并防御 null/undefined 异常：
const loadData = () => {
const savedData = JSON.parse(localStorage.getItem('scheduleData')) || {};
const month = selectMonth.value.trim();
const week = selectWeek.value.trim();
const keyPrefix = `${month}-${week}`;
document.querySelectorAll('.day').forEach(dayElement => {
const dayIndex = dayElement.getAttribute('data-day');
const key = `${keyPrefix}-${dayIndex}`;
const values = savedData[key] || [];
const ul = dayElement.querySelector('ul');
ul.innerHTML = ''; // 确保干净起始
values.forEach(text => {
if (!text?.trim()) return;
const li = document.createElement('li');
li.innerHTML = text;
// 还原删除按钮（×）
const span = document.createElement('span');
span.textContent = '×';
span.className = 'delete-btn';
span.addEventListener('click', (e) => {
e.stopPropagation();
li.remove();
saveData(); // 实时保存变更
});
// 还原勾选交互
li.addEventListener('click', () => li.classList.toggle('checked'));
li.appendChild(span);
ul.appendChild(li);
});
});
};⚠️ 注意事项与最佳实践
- 键名一致性：saveData() 与 loadData() 中的 key 生成逻辑必须完全相同（建议抽离为 getKey(month, week, dayIndex) 工具函数）；
- 空值防护：始终对 localStorage.getItem() 返回值做 || {} 处理，避免 JSON.parse(null) 报错；
- 性能考量：若单周期条目极多（>100），可考虑节流 saveData() 调用，或改用防抖；
- 调试技巧：在控制台执行 JSON.parse(localStorage.getItem('scheduleData')) 可直观验证存储结构是否符合预期。
通过以上重构，系统将真正实现“所见即所存，所切即所载”——用户在任意“月+周”组合下的编辑行为均被独立保存，切换周期时自动清空并加载对应数据，彻底解决“只清不存、存而不显”的典型 localStorage 使用误区。
