javascript - 每当页面刷新时，Javascript 倒数计时器都会重置

Question

我有 PHP 页面，我在其中添加了 30 分钟的倒计时。当我刷新页面或执行“插入”查询并重定向回该页面时，计时器会重置。

我希望计时器保持恒定并在页面刷新时继续计数而不会出现任何中断。

我的代码如下:

function startTimer(duration, display) {
  var timer = duration,
    minutes, seconds;
  setInterval(function() {
    minutes = parseInt(timer / 60, 10)
    seconds = parseInt(timer % 60, 10);

    minutes = minutes < 10 ? "0" + minutes : minutes;
    seconds = seconds < 10 ? "0" + seconds : seconds;

    display.textContent = minutes + ":" + seconds;

    if (--timer < 0) {
      timer = duration;
    }
  }, 1000);
}

window.onload = function() {
  var fiveMinutes = 60 * 30,
    display = document.querySelector('#time');
  startTimer(fiveMinutes, display);
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="timer">
  <div>Section</div>
  <div class="time">
    <strong>Time left: <span id="time">30:00</span></strong>
  </div>
</div>

感谢任何帮助..

Answer 1

使用 html5 本地存储更新定时器值，当页面加载发生时从本地存储读取定时器值。我想没有其他办法。