如何实现页面刷新时不重置的动态计数器，延续上次计时状态

我帮你搞定这个页面刷新后计数器重置的问题！核心思路是把剩余的倒计时时间存在浏览器的本地存储（localStorage）里，这样每次页面加载时，我们可以先读取这个存储的数值，接着从上次中断的地方继续计时，而不是每次都从0开始重新数5秒。

下面是修改后的完整代码，直接替换你的原有代码就行：

<html>
<head>
<meta charset="utf-8"/>
<title>Persistent Counter</title>
</head>
<body>
<div id="tm" style="display:none">Hello, I'm shown after the timer!</div>

<script type="text/javascript">
const tmElement = document.getElementById("tm");

// 从本地存储读取剩余时间，没有的话默认5000毫秒（5秒）
let remainingTime = parseInt(localStorage.getItem("remainingTime")) || 5000;
let startTime = Date.now();

// 如果剩余时间已经耗尽，直接显示元素
if (remainingTime <= 0) {
  tmElement.style.display = 'block';
  localStorage.removeItem("remainingTime");
} else {
  // 设置定时器，用剩余时间触发显示操作
  const displayTimer = setTimeout(() => {
    tmElement.style.display = 'block';
    localStorage.removeItem("remainingTime");
    clearInterval(updateStorageInterval); // 清除更新存储的定时器
  }, remainingTime);

  // 每隔100毫秒更新一次剩余时间到本地存储，确保刷新时拿到最新值
  const updateStorageInterval = setInterval(() => {
    const elapsedTime = Date.now() - startTime;
    remainingTime = Math.max(0, remainingTime - elapsedTime);
    localStorage.setItem("remainingTime", remainingTime);
    startTime = Date.now(); // 更新开始时间，减少计时误差
  }, 100);
}
</script>
</body>
</html>

代码关键点解释： #

• 本地存储的选择：用localStorage保存剩余时间，它会持久保存在浏览器中，即使关闭浏览器再打开也不会丢失。如果希望关闭浏览器后重置计时，可以把localStorage换成sessionStorage，后者在浏览器关闭后会自动清除数据。
• 实时更新存储：设置100毫秒间隔的定时器，不断更新剩余时间到本地存储，这样即使页面突然刷新，也能拿到最近的剩余时间，不会有太大误差。
• 边界情况处理：如果剩余时间已经小于等于0，直接显示目标元素并清除存储的记录，避免重复触发计时逻辑。

这样修改后，不管你怎么刷新页面，计数器都会从上次中断的时间点继续走，直到5秒结束后显示元素~

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