基于localStorage的1小时JavaScript倒计时无法保存状态问题

你的问题核心是存储了格式化后的时间字符串而非倒计时结束时间戳，且每次刷新都重新初始化倒计时，完全没读取之前的状态。下面是修正后的代码，解决了刷新后计时延续的问题：

<div id='stored'></div>

<script>
function countdown() {
    let endTime, hours, mins, msLeft, time;

    // 补零工具函数
    function twoDigits(n) {
        return n <= 9 ? '0' + n : n;
    }

    function updateTimer() {
        msLeft = endTime - (+new Date);
        if (msLeft < 1000) {
            // 计时结束，清除存储并跳转
            localStorage.removeItem('countdownEndTime');
            window.location.replace('done');
        } else {
            time = new Date(msLeft);
            hours = time.getUTCHours();
            mins = time.getUTCMinutes();
            // 格式化显示时间
            const displayTime = (hours ? `${hours}:${twoDigits(mins)}` : mins) + `:${twoDigits(time.getUTCSeconds())}`;
            document.getElementById('stored').innerHTML = displayTime;
            // 调整定时器间隔保证精度
            setTimeout(updateTimer, time.getUTCMilliseconds() + 500);
        }
    }

    // 页面加载时优先读取本地存储的结束时间
    const storedEndTime = localStorage.getItem('countdownEndTime');
    if (storedEndTime) {
        endTime = parseInt(storedEndTime, 10);
        // 检查存储时间是否过期，过期则重新初始化
        if (endTime < +new Date) {
            endTime = (+new Date) + 1000 * 60 * 60 + 500;
            localStorage.setItem('countdownEndTime', endTime);
        }
    } else {
        // 首次加载，初始化1小时倒计时的结束时间
        endTime = (+new Date) + 1000 * 60 * 60 + 500;
        localStorage.setItem('countdownEndTime', endTime);
    }

    updateTimer();
}

// 启动倒计时
countdown();
</script>

关键修改说明： #

• 把存储内容从格式化时间字符串改成结束时间的时间戳，刷新后可直接计算剩余时间
• 页面加载时先读取localStorage里的结束时间，而非每次都重新创建倒计时
• 增加过期检查：若存储的结束时间已过期，自动重新初始化倒计时
• 计时结束后清除本地存储记录，避免刷新后直接跳转

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