使用FlipClock实现的网页倒计时如何做到页面刷新后不被重置

核心逻辑是通过浏览器本地存储localStorage持久化记录倒计时的结束时间，每次页面加载时动态计算剩余时间，而非固定重置为初始值，具体修改步骤如下：

• 页面首次加载时，计算当前时间 + 初始倒计时总秒数作为结束时间戳，存入localStorage
• 后续页面刷新/重新打开时，优先读取存储的结束时间戳，计算当前时间与结束时间的差值作为剩余倒计时秒数
• 倒计时触发结束回调时，清空存储的结束时间戳，避免下次进入页面重复触发结束状态

修改后的完整代码如下：

$(window).on("load", function () {
  var clock;
  // 初始倒计时总秒数，对应你原来的30000
  var totalSeconds = 30000;
  // 读取本地存储的结束时间戳
  var endTime = localStorage.getItem("countdown_end_time");
  var now = Date.now();

  // 没有存储的结束时间，说明是首次启动倒计时
  if (!endTime) {
    endTime = now + totalSeconds * 1000;
    localStorage.setItem("countdown_end_time", endTime);
  } else {
    endTime = Number(endTime);
    // 如果已经到结束时间，直接设置剩余时间为0
    if (endTime <= now) {
      endTime = now;
    }
  }

  // 计算剩余秒数
  var remainSeconds = Math.ceil((endTime - now) / 1000);

  clock = $(".clock").FlipClock({
    clockFace: "DailyCounter",
    autoStart: false,
    callbacks: {
      stop: function () {
        $(".message").html("The IDO has been started!");
        // 结束后清除存储的结束时间
        localStorage.removeItem("countdown_end_time");
      },
    },
  });
  
  clock.setTime(remainSeconds);
  clock.setCountdown(true);
  clock.start();
});

注意事项 #

• 该方案基于浏览器本地存储实现，用户手动清除浏览器缓存后存储的倒计时数据会丢失，属于正常现象
• 如果需要跨设备同步倒计时状态，需要对接后端接口存储结束时间，前端每次加载时从接口拉取数据即可

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