如何在多周期日程表中正确保存并加载各日期项的本地数据

在构建动态日程管理界面（如按“月+周”切换的周计划表）时，一个常见痛点是：用户在“1月-第1周”的周一输入了若干待办事项（

核心问题在于原始代码中 loadData() 依赖的 key 结构与 saveData() 不一致，且缺少对“清除逻辑”的精准控制：clearData() 若粗暴清空全部

，将破坏已保存的其他周期数据；而若完全不清理，则新周期会残留旧数据。因此，必须实现按周期前缀隔离操作。

✅ 正确的数据键名设计

应统一使用 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，而应仅重置当前周期对应的所有

内容，并标记其归属键，为后续 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 使用误区。