如何解决JS 24小时倒计时页面刷新后重置重启的问题

原代码每次页面加载时，都会以当前打开页面的时间为基准重新计算24小时后的截止时间，没有持久化存储固定的倒计时终点，所以刷新后会重新开始计时。

使用浏览器本地存储localStorage持久化保存第一次生成的倒计时截止时间戳：

• 页面加载时优先读取本地存储中已保存的截止时间
• 若没有存储记录（首次访问）或记录已过期，重新生成24小时后的截止时间并存入本地存储
• 倒计时正常运行时全程使用固定的存储时间作为终点，不会随页面刷新重置

JavaScript 部分 #

function getTimeRemaining(endtime) {
  const total = Date.parse(endtime) - Date.parse(new Date());
  const seconds = Math.floor((total / 1000) % 60);
  const minutes = Math.floor((total / 1000 / 60) % 60);
  const hours = Math.floor((total / (1000 * 60 * 60)) % 24);
  const days = Math.floor(total / (1000 * 60 * 60 * 24));

  return {
    total,
    days,
    hours,
    minutes,
    seconds
  };
}

function initializeClock(id, endtime) {
  const clock = document.getElementById(id);
  const daysSpan = clock.querySelector('.days');
  const hoursSpan = clock.querySelector('.hours');
  const minutesSpan = clock.querySelector('.minutes');
  const secondsSpan = clock.querySelector('.seconds');

  function updateClock() {
    const t = getTimeRemaining(endtime);

    daysSpan.innerHTML = t.days;
    hoursSpan.innerHTML = ('0' + t.hours).slice(-2);
    minutesSpan.innerHTML = ('0' + t.minutes).slice(-2);
    secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);

    if (t.total <= 0) {
      clearInterval(timeinterval);
      // 倒计时结束后清除存储记录，下次访问重新开始24小时计时
      localStorage.removeItem('countdownDeadline');
    }
  }

  updateClock();
  const timeinterval = setInterval(updateClock, 1000);
}

// 初始化截止时间逻辑
let savedDeadline = localStorage.getItem('countdownDeadline');
let deadline;
if (savedDeadline) {
  deadline = new Date(Number(savedDeadline));
  // 存储的时间已过期则重新生成
  if (deadline.getTime() < Date.now()) {
    deadline = new Date(Date.now() + 24 * 60 * 60 * 1000);
    localStorage.setItem('countdownDeadline', deadline.getTime().toString());
  }
} else {
  // 首次访问生成新的截止时间并存入本地存储
  deadline = new Date(Date.now() + 24 * 60 * 60 * 1000);
  localStorage.setItem('countdownDeadline', deadline.getTime().toString());
}

initializeClock('clockdiv', deadline);

HTML 部分 #

<div>
  <h1>Countdown Clock</h1>
  <div id="clockdiv">
    <div>
      <span class="days"></span>
      <div class="smalltext">Days</div>
    </div>
    <div>
      <span class="hours"></span>
      <div class="smalltext">Hours</div>
    </div>
    <div>
      <span class="minutes"></span>
      <div class="smalltext">Minutes</div>
    </div>
    <div>
      <span class="seconds"></span>
      <div class="smalltext">Seconds</div>
    </div>
  </div>
</div>

• localStorage存储的数据和浏览器站点绑定，除非用户手动清除浏览器缓存、站点数据，否则截止时间会一直保留
• 如果需要多标签页同步倒计时状态，可以增加storage事件监听更新当前页的计时终点，普通单页使用场景下上述代码已满足需求

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