浏览器存储的列表数据无法加载，仅实现清除功能的问题求助

核心问题 #

1. 保存时覆盖历史数据：当前saveData函数每次创建空对象存储数据，会完全覆盖localStorage中之前保存的其他月份/周的条目，导致切换后旧数据丢失。
2. 模板字符串语法错误：key中的$ { dayIndex }和$ { week }存在多余空格，生成的key格式混乱，加载时无法匹配对应数据。
3. 数据读取逻辑错误：loadData中尝试读取${month} - ${week}格式的key，但实际存储的key是月份-周-日期索引，结构不匹配导致加载失败。
4. 切换时未正确清空并加载：切换选项后未完整清空当前输入区域和列表，也未正确加载目标月份/周的已存数据。

修正后的代码 #

1. 修复saveData函数（保留历史数据+正确key格式）

const saveData = () => {
  // 先读取已有的所有数据，避免覆盖其他月份/周的内容
  const existingData = JSON.parse(localStorage.getItem('scheduleData')) || {};
  const dayElements = document.querySelectorAll('.day');
  const month = document.getElementById('select-month').value;
  const week = document.getElementById('select-week').value;

  dayElements.forEach(dayElement => {
    const dayIndex = dayElement.getAttribute('data-day');
    // 修正key的格式，移除多余空格和换行
    const key = `${month} - ${week} - ${dayIndex}`;

    const liElements = dayElement.querySelectorAll('li');
    // 只保存li的纯文本内容（排除删除按钮span）
    const values = Array.from(liElements).map(li => {
      const clone = li.cloneNode(true);
      clone.querySelector('span')?.remove();
      return clone.textContent.trim();
    });

    // 更新现有数据中的对应条目，而非覆盖全部
    existingData[key] = values;
  });

  localStorage.setItem('scheduleData', JSON.stringify(existingData));
};

2. 修复loadData函数（清空当前内容+正确加载数据）

const loadData = () => {
  const savedData = JSON.parse(localStorage.getItem('scheduleData')) || {};
  const month = document.getElementById('select-month').value;
  const week = document.getElementById('select-week').value;
  const dayElements = document.querySelectorAll('.day');

  dayElements.forEach(dayElement => {
    const dayIndex = dayElement.getAttribute('data-day');
    const key = `${month} - ${week} - ${dayIndex}`;
    const list = dayElement.querySelector('ul');
    const input = dayElement.querySelector('.input');

    // 清空当前日期的输入框和列表
    input.value = '';
    list.innerHTML = '';

    const values = savedData[key];
    if (values && values.length > 0) {
      values.forEach(value => {
        const li = document.createElement('li');
        li.textContent = value;

        // 重新生成删除按钮并绑定事件
        const span = document.createElement('span');
        span.innerHTML = "\u00d7";
        span.addEventListener('click', (e) => {
          e.stopPropagation();
          e.target.parentElement.remove();
          checkScroll();
          saveData();
        });
        li.appendChild(span);

        // 绑定选中事件
        li.addEventListener('click', () => {
          li.classList.toggle('checked');
        });

        list.appendChild(li);
      });
    }
  });
};

3. 添加选项切换的事件监听

// 绑定月份/周数选择器的切换事件
const monthSelect = document.getElementById('select-month');
const weekSelect = document.getElementById('select-week');

const handleSelectionChange = () => {
  loadData(); // 切换时自动清空并加载对应数据
};

monthSelect.addEventListener('change', handleSelectionChange);
weekSelect.addEventListener('change', handleSelectionChange);

关键修改说明 #

• 保留历史数据：保存时先读取已存数据，仅更新当前选中月份/周的条目，避免覆盖其他数据。
• 统一key格式：修正模板字符串的语法错误，确保每个条目key唯一且可匹配。
• 分离内容与操作：保存时只存储纯文本内容，加载时重新生成操作按钮和事件，避免冗余HTML存储。
• 自动清空加载：切换选项时自动调用loadData，该函数会先清空当前输入区域，再加载目标月份/周的已存数据，满足“全新输入空间+保留对应数据”的需求。

内容的提问来源于stack exchange，提问作者breanne1209