页面刷新时倒计时计时器重置问题修复请求附JavaScript代码

嘿，这个问题我太熟了！页面刷新时计时器重置，本质是因为浏览器会重新加载所有JavaScript代码，原来存在内存里的min、sec这些变量都会被清空，直接回到初始值。要解决这个问题，我们得把剩余时间存到浏览器的**本地存储（localStorage）**里——这是浏览器提供的持久化存储空间，刷新页面后数据不会丢失。

我帮你修改了代码，加上了localStorage的读写逻辑，还优化了一些细节：

// 初始化时优先从localStorage读取剩余时间，没有的话用默认的1分59秒
let min = localStorage.getItem('countdownMin') ? parseInt(localStorage.getItem('countdownMin')) : 1;
let sec = localStorage.getItem('countdownSec') ? parseInt(localStorage.getItem('countdownSec')) : 59;
let timer;
let timeon = 0;

function ActivateTimer() {
  if (!timeon) {
    timeon = 1;
    Timer();
  }
}

function Timer() {
  // 给秒数补零，让显示更规范（比如0:05而不是0:5）
  const displaySec = sec.toString().padStart(2, '0');
  const _time = `${min}:${displaySec}`;
  document.getElementById("Label1").innerHTML = _time;

  if (_time !== "0:00") {
    // 更新时间逻辑和原来一致
    if (sec === 0) {
      min -= 1;
      sec = 59;
    } else {
      sec -= 1;
    }
    // 把最新的剩余时间存到localStorage，确保刷新后能读取
    localStorage.setItem('countdownMin', min);
    localStorage.setItem('countdownSec', sec);
    // 推荐直接传函数给setTimeout，比传字符串更安全高效
    timer = setTimeout(Timer, 1000);
  } else {
    // 计时结束后，清空localStorage的缓存，避免下次打开还显示结束状态
    localStorage.removeItem('countdownMin');
    localStorage.removeItem('countdownSec');
    timeon = 0;
    // 这里可以添加计时结束的提示逻辑，比如弹出提示
    alert('倒计时结束啦！');
  }
}

// 页面加载完成后，如果有缓存的时间，直接显示在页面上
window.onload = function() {
  if (localStorage.getItem('countdownMin')) {
    const displaySec = sec.toString().padStart(2, '0');
    document.getElementById("Label1").innerHTML = `${min}:${displaySec}`;
  }
}

几个关键细节说明： #

• 持久化存储：每次更新时间后，都会把当前的min和sec存入localStorage；初始化时先尝试读取存储的值，没有的话再用默认值，这样刷新后就能无缝继续计时。
• 秒数补零：用padStart(2, '0')让秒数始终显示两位，不仅更美观，也让结束条件的判断更统一（改成判断"0:00"）。
• 优化setTimeout调用：原来的setTimeout("Timer()", 1000)存在安全风险（可能被注入恶意代码），直接传函数setTimeout(Timer, 1000)是更规范的写法。
• 页面加载时的显示：刷新后如果有未完成的计时，会直接把剩余时间显示在Label1里，不用用户重新点击启动按钮。

内容的提问来源于stack exchange，提问作者S. Gandhi