前端刷新页面不清除计时器

在前端开发中，当你创建一个定时器（比如使用JavaScript的`setInterval`或`setTimeout`），这个定时任务会在页面加载完成后立即开始运行，并持续直到手动清除它。当用户刷新页面时，浏览器默认的行为是重新加载整个HTML、CSS和JavaScript文件，这包括清除所有的定时器。

为了避免这种情况，你需要采取一些策略来保存并恢复定时器的状态。一种常见做法是将定时器的引用存储在全局变量（如`window`对象）或某个可以持久化的数据结构（如localStorage或sessionStorage）中。在页面加载之前，检查是否有需要恢复的定时器，如果存在就重新设置它们。

例如：

// 存储定时器
function saveTimer(timerId) {
  window.localStorage.setItem('timer', timerId);
}

// 加载时恢复定时器
window.addEventListener('DOMContentLoaded', function() {
  const timerId = localStorage.getItem('timer');
  if (timerId) {
    // 恢复定时器
    clearTimeout(timerId); // 先清除之前的
    const newTimerId = setInterval(() => {
      console.log('Timer running after page refresh');
    }, 1000); // 重新设置新的定时器
    saveTimer(newTimerId); // 更新存储的定时器ID
  }
});

// 创建定时器
const myTimer = setTimeout(() => {
  console.log('Timer created before refresh');
}, 5000);

// 刷新前保存
saveTimer(myTimer);