我有一个 javascript 计时器，但即使我刷新或重新启动浏览器，我也希望计时器继续运行

Question

我正在使用我在 google 中找到的倒计时计时器，我只是修改了一些代码行以使计时器向上计数而不是倒计时。我只想让我的计时器计数，然后当我单击停止按钮时它会停止。我的问题是，即使页面刷新或浏览器重新启动，我也希望计时器不会重置。据我所知，我需要为此使用 cookie，但我不知道如何将其合并到我的代码中。请帮忙..

这是我的代码。

(function() {
  $(document).ready(function() {
    var time = "00:00:00",
      parts = time.split(':'),
      hours = +parts[0],
      minutes = +parts[1],
      seconds = +parts[2],
      span = $('#countup');

    function correctNum(num) {
      return (num < 10) ? ("0" + num) : num;
    }

    var timer = setInterval(function() {
      seconds++;
      if (seconds > 59) {
        minutes++;
        seconds = 0;

        if (minutes > 59) {
          hours++;
          seconds = 0;
          minutes = 0;

          if (hours >= 24) {
            alert("timer finished");
          }
        }
      }
      span.text(correctNum(hours) + ":" + correctNum(minutes) + ":" + correctNum(seconds));
    }, 1000);
  });
})()

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span id="countup">00:00:00</span>

Answer 1

Working script using 24 seconds instead of 24 hours - 定时器结束后它会重置，所以下次刷新页面时它会从 0 开始

取消注释这些行以获得有效的脚本。

注意变化

var savedDate = "", // +localStorage.getItem("date"),

到

var savedDate = +localStorage.getItem("date"),

const pad = (num) => ("0" + num).slice(-2);

$(function() {
  var savedDate = "", // +localStorage.getItem("date"),
    date = new Date();
  if (savedDate && !isNaN(savedDate)) date = new Date(savedDate);
  else date.setHours(0, 0, 0, 0);


  var hours = date.getHours(),
    minutes = date.getMinutes(),
    seconds = date.getSeconds(),
    $span = $('#countup');

  var timer = setInterval(function() {
    date.setSeconds(date.getSeconds() + 1);
    if (date.getHours() >= 24) {
      clearInterval(timer);
      $span.text("timer finished");
      // localStorage.removeItem("date");
    } else {
      $span.text(
        pad(date.getHours()) + ":" +
        pad(date.getMinutes()) + ":" +
        pad(date.getSeconds())
      );
      // localStorage.setItem("date", date.getTime())
    }
  }, 1000);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span id="countup"></span>

Answer 2

我认为你应该使用本地存储来存储时间。最好在卸载页面事件上存储时间

Answer 3

保持倒计时的最佳方式可能是将倒计时的结束保存为一个固定的时间点（例如 UNIX 时间戳，JavaScript 支持），然后重新计算本地时间与当前时间之间的差异节省页面加载时间。实际上有这样方便的库可以帮助进行时间操作，例如 Moment.js。

我建议使用 LocalStorage 而不是 cookie，cookie 也会发送到服务器，并且更多地用于身份验证/会话令牌。这是一篇很好的入门文章：

https://www.taniarascia.com/how-to-use-local-storage-with-javascript/

Answer 4

您可以使用例如 localstorage 将计时器保存在那里，然后就可以使用它。 请尝试以下示例：

// Set an item to localstorage
localStorage.setItem('name', 'value');

// Read the item from localstorage
localStorage.getItem('name'); => // => 'value'

在您的代码中应该如下所示：

(function(){
  $(document).ready(function() {

    var time = localStorage.getItem('timer') || "00:00:00",
        parts = time.split(':'),
        hours = +parts[0],
        minutes = +parts[1],
        seconds = +parts[2],
        span = $('#countup');

    function correctNum(num) {
        return (num<10)? ("0"+num):num;
    }

    var timer = setInterval(function(){
        seconds++;
        if(seconds > 59) {
            minutes++;
            seconds = 0;

            if(minutes > 59) {
                hours++;
                seconds = 0;
                minutes = 0;

                if(hours >= 24) {
                  alert("timer finished");
                }
            }
        }

        var displayTime = correctNum(hours) + ":" + correctNum(minutes) + ":" + correctNum(seconds);
        localStorage.setItem('timer', displayTime);
        span.text(displayTime);
    }, 1000); 
  }); 
})()