如何创建一个定时器循环，它将在页面刷新后工作？

Question

我创建了自己的倒计时，似乎我错过了一个部分，每当我刷新页面时它也会刷新计时器本身。我希望通过该脚本最大化性能，以便如何使其无限循环？

这是代码：

function startGRBTimer(duration, display) {
  var timer = duration,
    hours, minutes, seconds;
  setInterval(function() {
    days = parseInt(timer / (24 * 60 * 60), 10);
    hours = parseInt(timer % (24 * 60 * 60) / (60 * 60), 10);
    minutes = parseInt(timer % (60 * 60) / 60, 10);
    seconds = parseInt(timer % 60, 10);
    hours = hours < 10 ? "0" + hours : hours;
    minutes = minutes < 10 ? "0" + minutes : minutes;
    seconds = seconds < 10 ? "0" + seconds : seconds;
    display.textContent = days + "d" + " " + hours + "h " + minutes + "m " + seconds + "s";
    --timer;
    if (timer <= 0) {
      timer = duration;
    }
  }, 1000);
}

var display = document.querySelector("#grb");
startGRBTimer(60, display);

Answer 1

这就是这段代码的工作方式，它没有任何问题。每次刷新页面时，脚本都会重新运行，并且每当加载页面时都会创建var timer = duration, hours, minutes, seconds;。

您应首先考虑创建，然后将变量存储到用户的本地存储中，并让您的程序从该变量（或数组）中读取信息。

Answer 2

你需要独立于你的网络应用程序做一些工作，能够在页面刷新后生活，对吗？

ServiceWorkers很可能对你有用。

Answer 3

对于这种情况，我们可以“误用”window.name（参见文档链接），如下例所示。或者您可以使用localStorage，但这不适用于本地文件（file:///...）。因为这个window.name更好也更短。

解

function startGRBTimer(duration, display)
{
    var timer = window.name == '' ? duration : window.name,
        hours, minutes, seconds;

    setInterval(function()
    {
        days = parseInt(timer / (24 * 60 * 60), 10);
        hours = parseInt(timer % (24 * 60 * 60) / (60 * 60), 10);
        minutes = parseInt(timer % (60 * 60) / 60, 10);
        seconds = parseInt(timer % 60, 10);
        hours = hours < 10 ? "0" + hours : hours;
        minutes = minutes < 10 ? "0" + minutes : minutes;
        seconds = seconds < 10 ? "0" + seconds : seconds;
        display.textContent = days + "d" + " " + hours + "h " + minutes + "m " + seconds + "s";
        --timer;

        if(timer <= 0)
        {
            timer = duration;
        }

        window.name = timer;
    }, 1000);
}

var display = document.querySelector("#grb");
startGRBTimer(60, display);

<div id="grb"></div>