如何解决页面刷新后计时器自动重启的问题？

当前代码每次页面刷新都会重新初始化倒计时变量，导致计时器重置。我们可以通过浏览器的localStorage持久化存储剩余时间，来解决这个问题。

修改后的完整代码 #

整合后的HTML+JS代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div id="stopwatch"></div>
  <script>
    var spd = 1000;
    var spdVal = 1;
    // 优先从本地存储读取剩余时间，无记录则用初始的5分7秒
    var cntDown = parseInt(localStorage.getItem('remainingTime')) || (5 * 60 * spdVal + 7);
    
    // 统一的时间渲染函数
    function renderTime() {
        var mn, sc;
        if (cntDown < 0) {
            document.getElementById('stopwatch').innerHTML = "00:00";
            return;
        }
        mn = Math.floor((cntDown / spdVal) / 60);
        mn = (mn < 10 ? '0' + mn : mn);
        sc = Math.floor((cntDown / spdVal) % 60);
        sc = (sc < 10 ? '0' + sc : sc);
        document.getElementById('stopwatch').innerHTML = mn + ':' + sc;
    }

    // 页面加载时先渲染一次当前时间
    renderTime();

    setInterval(function () {
        cntDown--;
        if (cntDown < 0) {
            // 倒计时结束后清除本地存储记录
            localStorage.removeItem('remainingTime');
            renderTime();
            return false;
        }
        // 每次更新后同步保存剩余时间到本地存储
        localStorage.setItem('remainingTime', cntDown);
        renderTime();
    }, spd);
  </script>
</body>
</html>

关键改动说明 #

• 持久化读取：初始化cntDown时，先尝试从localStorage读取之前保存的剩余时间，没有记录时才使用初始值，确保刷新后能延续之前的进度。
• 实时同步：每次倒计时更新后，将当前剩余时间存入localStorage，保证页面刷新时能获取到最新的倒计时状态。
• 结束清理：当倒计时结束时，移除本地存储中的记录，避免下次页面加载时直接显示结束状态。
• 初始渲染：新增renderTime函数，页面加载时立即渲染当前时间，解决刷新后短暂空白的问题。

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