如何一次性获取日期并阻止其每日自动更新？JS日期填充函数实现疑问

实现思路 #

用localStorage存储首次生成的固定日期序列是最直接的方案，不需要重构现有函数，只要在渲染逻辑里加一层缓存判断就行，执行逻辑很简单：

• 每次渲染时先查本地有没有存好的周日期数据
• 有缓存的话直接读缓存值填充DOM，不调用new Date()获取实时当前时间
• 没缓存的话，才按原有逻辑，以首次打开页面时的当前时间为起点生成连续7天的日期，把这组日期转成可存储的格式存入localStorage，再完成渲染

需要注意两个细节：

• 不能直接把Date类型对象存进localStorage，要转成时间戳数组再存，不然序列化后会失去Date的原生方法，读出来没法直接使用
• 原代码是在循环里原地修改同一个Date实例来生成连续日期，要做缓存的话，每次循环得存当前日期的快照，不然数组里存的全是同一个被不断修改的对象引用，最后所有值都会变成序列最后一天的日期

改造后的完整代码 #

// 本地存储的键名，可根据项目自定义
const WEEK_DATE_CACHE_KEY = 'fixedWeekDayList';

const formatDayNumber = date =>
    date.toLocaleDateString('en-US', { day: 'numeric' });

const incrementDayNumber = date => {
    date.setDate(date.getDate() + 1);
    return date;
};

const currentDayChangeNumber = () => {
    const dayDomList = [...document.querySelectorAll('.day-number')];
    let dateList = [];

    // 优先读取本地缓存
    const storageValue = localStorage.getItem(WEEK_DATE_CACHE_KEY);
    if (storageValue) {
        // 缓存存在时，把存储的时间戳转回可用的Date对象
        dateList = JSON.parse(storageValue).map(timestamp => new Date(timestamp));
    } else {
        // 无缓存时，沿用原有逻辑生成首次加载的日期列表
        const startDate = new Date();
        dayDomList.forEach(() => {
            // 拷贝当前日期快照存入列表，避免后续修改源值影响已存储的日期
            dateList.push(new Date(startDate));
            incrementDayNumber(startDate);
        });
        // 把日期序列转成时间戳数组存入本地
        localStorage.setItem(
            WEEK_DATE_CACHE_KEY,
            JSON.stringify(dateList.map(date => date.getTime()))
        );
    }

    // 用最终的日期列表填充DOM
    dayDomList.forEach((dom, index) => {
        dom.textContent = formatDayNumber(dateList[index]);
    });
}

维护说明 #

• 存储原始时间戳而非DOM上的展示文本，好处是后续如果需要调整日期展示格式（比如改成带月份、星期的格式），不需要清除缓存，直接调整formatDayNumber函数的逻辑即可，读取缓存的时间戳重新渲染就能拿到新格式的内容
• 如果需要重置为“首次加载生成新的固定日期”的逻辑，只需要清除对应键值的本地存储即可，对应命令为localStorage.removeItem('fixedWeekDayList')

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