本文详解如何在基于月/周选择器的动态日程界面中，正确使用 localStorage 实现“按月-周-日三级键名”精准存取 <li> 列表数据，避免误清历史记录，并确保切换选项后自动加载对应数据。
本文详解如何在基于月/周选择器的动态日程界面中，正确使用 localstorage 实现“按月-周-日三级键名”精准存取 `
在构建可持久化的周/月计划表（如教学安排、任务看板）时，一个常见痛点是：用户输入的 <li> 条目在切换月份或周次后全部丢失——表面看是“清空了”，实则是未建立上下文感知的数据隔离机制。核心问题在于：原始代码中 saveData() 和 loadData() 使用了动态生成的键（如 "January - Week 1 - 1"），但缺乏配套的条件化清除逻辑与时机可控的数据加载流程，导致每次切换都触发全局清空，而加载又未在正确时机执行。
✅ 正确的数据隔离策略：三级键名 + 精准清除
应采用 month-week-dayIndex 作为唯一存储键（例如 "January-Week 1-1"），确保不同日期组合的数据完全独立。关键在于：清除操作不应清空整个 DOM 或所有 localStorage 数据，而应仅重置当前选中月周范围内的 <ul> 内容。
为此，需重构 clearData() 函数，使其：
- 读取当前选中的 month 和 week；
- 构造前缀 keyPrefix = "${month}-${week}"；
- 遍历所有 .day 元素，为每个 <ul> 设置或校验 data-key 属性（如 "January-Week 1-1"）；
- 仅清空 data-key 匹配当前前缀的 <ul>，而非无差别清空所有列表。
以下是优化后的 clearData() 实现：
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 key = `${keyPrefix}-${dayIndex}`;
const ul = dayElement.querySelector('ul');
// 为 ul 绑定当前上下文键，便于后续精准识别
ul.setAttribute('data-key', key);
ul.innerHTML = ''; // 清空本日列表，但保留键标识
});
saveData(); // 立即保存空状态，确保 localStorage 同步
};⚠️ 注意：原答案中 if (ul.getAttribute('data-key') === key) 的判断逻辑易因初始化缺失导致失效；改为统一设置 data-key 并直接清空更健壮，且避免首次加载时键不匹配的问题。
✅ 可靠的数据加载时机：清除 → 更新标题 → 加载
loadData() 必须在 DOM 结构就绪、data-key 已写入且 <ul> 为空后执行，否则将找不到目标容器或重复追加。因此，应在月/周下拉框的 change 事件中严格遵循三步顺序：
const selectMonth = document.getElementById('select-month');
const selectWeek = document.getElementById('select-week');
selectMonth.addEventListener('change', () => {
clearData();
updateDayTitles(); // 重新渲染周一至周日标题（如 "Jan 1", "Jan 2"）
loadData(); // ✅ 此时 ul 已有 data-key，且为空，可安全注入历史 li
});
selectWeek.addEventListener('change', () => {
clearData();
updateDayTitles();
loadData();
});✅ 增强版 loadData()：防御性解析与 DOM 安全插入
原始 loadData() 存在潜在风险：若 savedData[key] 为 undefined 或非数组，values.forEach 将报错；且直接 innerHTML = value 可能引入 XSS 风险。推荐改写为：
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}`;
const values = Array.isArray(savedData[key]) ? savedData[key] : [];
const ul = dayElement.querySelector('ul');
ul.innerHTML = ''; // 确保干净起始状态
values.forEach(text => {
const li = document.createElement('li');
li.textContent = text; // ✅ 使用 textContent 防 XSS
// 添加删除按钮（×）
const span = document.createElement('span');
span.textContent = '×';
span.className = 'delete-btn';
span.addEventListener('click', () => {
li.remove();
saveData();
checkScroll();
});
// 添加勾选交互
li.addEventListener('click', () => li.classList.toggle('checked'));
li.appendChild(span);
ul.appendChild(li);
});
});
};✅ 最终验证要点
| 检查项 | 说明 |
|---|---|
| ✅ localStorage 键结构 | 打开浏览器开发者工具 → Application → Local Storage，确认键名为 scheduleData，值为形如 {"January-Week 1-1": ["Hello"], "February-Week 3-2": ["Review"]} 的对象 |
| ✅ 切换不丢失 | 从 "January-Week 1" 输入 "Hello" → 切到 "February-Week 2" → 返回 "January-Week 1"，"Hello" 应完好重现 |
| ✅ 新增即保存 | 每次点击 + 按钮添加 <li> 后，立即调用 saveData()（建议在添加逻辑末尾显式调用） |
| ✅ 样式与交互 | .checked 类、删除按钮点击效果、滚动检测 checkScroll() 均正常工作 |
通过以上结构化改造，你将获得一个真正「会记忆」的日程组件：它理解月、周、日的层级关系，只在必要时清除局部状态，并在每次视图就绪后精准还原用户的历史输入——这才是专业级前端持久化体验的核心所在。
