如何将日历的localStorage存储替换为服务器端事件加载？

核心思路 #

原CodeBoxx日历通过localStorage按「年月」存储事件数据，结构为以月/日/年为键、事件数组为值的对象。我们需要把从服务器拉取的事件转换成这个结构，同时修改日历的初始化和月份切换逻辑，让它从服务器获取数据而非本地存储。

具体修改步骤 #

1. 替换初始化时的LocalStorage加载代码

删除原有的LocalStorage加载逻辑，换成初始化空数据并调用服务器加载函数：

// 替换原LocalStorage加载代码
cal.data = {}; // 先初始化空数据对象
getEvents(cal.sYear, cal.sMth); // 加载当前选中年月的事件

2. 调整服务器事件加载函数

修改你的getEvents，让它把服务器返回的事件转换成日历需要的cal.data结构，并且支持按年月筛选（建议后端接口配合做年月过滤，减少数据传输）：

async function getEvents(year, month) {
  // 这里假设后端支持通过year和month参数筛选事件，根据实际接口调整URL
  fetch(`${data_url}?year=${year}&month=${month + 1}`, {
    method: "GET",
    credentials: "same-origin",
    headers: {
      Accept: "application/json",
      "X-Requested-With": "XMLHttpRequest",
      "X-CSRFToken": csrftoken,
    }
  })
  .then((response) => response.json())
  .then((data) => {
    // 重置当前月份的事件数据
    cal.data = {};
    data.events.forEach((element) => {
      const eDate = new Date(element.event_date);
      // 生成日历识别的日期格式：月/日/年（如10/5/2024）
      const dateStr = `${eDate.getMonth() + 1}/${eDate.getDate()}/${eDate.getFullYear()}`;
      // 如果该日期还没有事件数组，先初始化
      if (!cal.data[dateStr]) {
        cal.data[dateStr] = [];
      }
      // 将事件添加到对应日期的数组中
      cal.data[dateStr].push({
        type: element.event_type,
        note: element.event_note,
        status: element.event_status,
        id: element.event_id
      });
    });
    // 数据处理完成后渲染日历
    cal.draw();
  })
  .catch((err) => {
    console.error("事件加载失败:", err);
    // 加载失败时初始化空数据，避免日历报错
    cal.data = {};
    cal.draw();
  });
}

3. 修改月份切换逻辑

找到日历中切换月份的函数（通常是cal.next()、cal.prev()、cal.jump()），替换原有的LocalStorage加载逻辑，改为调用getEvents：

// 下一月切换逻辑示例
cal.next = () => {
  cal.sMth++;
  if (cal.sMth > 11) {
    cal.sMth = 0;
    cal.sYear++;
  }
  // 替换原LocalStorage加载，调用服务器接口
  getEvents(cal.sYear, cal.sMth);
};

// 上一月切换逻辑示例
cal.prev = () => {
  cal.sMth--;
  if (cal.sMth < 0) {
    cal.sMth = 11;
    cal.sYear--;
  }
  getEvents(cal.sYear, cal.sMth);
};

关键注意事项 #

• 后端接口优化：尽量让后端支持按年月筛选事件，不要拉取全量数据再前端过滤，提升加载速度。
• 日期格式匹配：确保生成的dateStr和原日历使用的格式完全一致（月/日/年，不带前导零也可以，比如5/3/2024和05/03/2024都能识别，但要统一）。
• 错误处理：一定要加catch捕获请求失败的情况，避免日历因为数据异常崩溃。
• 后续扩展：如果需要支持添加/修改/删除事件，还要对应写fetch的POST/PUT/DELETE请求，替换原日历中保存到LocalStorage的逻辑。

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