如何使js计时器在重新加载页面时不重新启动？

Question

我制作了（实际上是复制并做了一些更改）一个 javascript 计时器，但是如果我刷新页面时我不知道该怎么做...

您可以在此处找到代码：

var ms = 0, s = 0, m = 60;
                var timer;

                var stopwatchEl = document.querySelector('.stopwatch');
                var lapsContainer = document.querySelector('.laps');

                function start() {
                    if (!timer) {
                        timer = setInterval(run, 10);
                    }
                }

                function run() {
                    stopwatchEl.textContent = (m < 10 ? "0" + m : m) + ":" + (s < 10 ? "0" + s : s) + ":" + (ms < 10 ? "0" + ms : ms);
                    ms--;
                    if (ms < 0) {
                        ms = 99;
                        s--;
                    }
                    if (s < 0) {
                        s = 59;
                        m--;
                    }
                    if(m==0 && s==0 && ms==0) {
                        pause();
                        var figyelmeztetes = confirm("Lejárt az idő!");
                    }
                    stopwatchEl.textContent = (m < 10 ? "0" + m : m) + ":" + (s < 10 ? "0" + s : s) + ":" + (ms < 10 ? "0" + ms : ms);
                }

                function pause() {
                    clearInterval(timer);
                    timer = false;
                }

                function stop() {
                    var figyelmeztetes = confirm("Vigyázz!!! Ezzel a számláló visszaáll 60 percre!");
                    if(figyelmeztetes == true) {
                        clearInterval(timer);
                        timer = false;
                        ms = 0;
                        s = 0;
                        m = 60;
                        stopwatchEl.textContent = (m < 10 ? "0" + m : m) + ":" + (s < 10 ? "0" + s : s) + ":" + (ms < 10 ? "0" + ms : ms);
                    }
                }

.controls {
  display: flex;
 }

<div class="controls">
                <div onclick="start()">Start</div>
                <div onclick="pause()">Pause</div>
                <div onclick="stop()">Restart</div>
            </div>
            <div class="stopwatch">60:00:00</div>

有什么简单的方法可以满足我的要求吗？

感谢您的帮助！

Answer 1

您可以尝试将剩余时间存储在 localStorage 中并在页面加载时引用它

Answer 2

您可以像这样设置 window 在本地存储中卸载之前的时间值

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div class="controls">
      <button onclick="start()">Start</button>
      <button onclick="pause()">Pause</button>
      <button onclick="stop()">Restart</button>
    </div>
    <div class="stopwatch">60:00:00</div>


  </body>
</html>

     var ms = 0,
        s = 0,
        m = 60;
      var isCountingDown = false;
      var timer;

      window.addEventListener("load", function () {
        if (window.localStorage.getItem("time") !== null) {
          let obj = JSON.parse(window.localStorage.getItem("time"));
          s = obj["s"];
          ms = obj["ms"];
          m = obj["m"];

          stopwatchEl.textContent = `${m}:${s}:${ms}`;
          start();
        }
      });

      window.addEventListener("beforeunload", function () {
        if (isCountingDown == true) {
          pause();
          let obj = {
            ms: ms,
            s: s,
            m: m,
          };
          window.localStorage.setItem("time", JSON.stringify(obj));
        }
      });

      var stopwatchEl = document.querySelector(".stopwatch");
      var lapsContainer = document.querySelector(".laps");

      function start() {
        if (!timer) {
          isCountingDown = true;
          timer = setInterval(run, 10);
        }
      }

      function run() {
        stopwatchEl.textContent =
          (m < 10 ? "0" + m : m) +
          ":" +
          (s < 10 ? "0" + s : s) +
          ":" +
          (ms < 10 ? "0" + ms : ms);
        ms--;
        if (ms < 0) {
          ms = 99;
          s--;
        }
        if (s < 0) {
          s = 59;
          m--;
        }
        if (m == 0 && s == 0 && ms == 0) {
          pause();
          var figyelmeztetes = confirm("Lejárt az idő!");
        }
        stopwatchEl.textContent =
          (m < 10 ? "0" + m : m) +
          ":" +
          (s < 10 ? "0" + s : s) +
          ":" +
          (ms < 10 ? "0" + ms : ms);
      }

      function pause() {
        clearInterval(timer);
        timer = false;
      }

      function stop() {
        var figyelmeztetes = confirm(
          "Vigyázz!!! Ezzel a számláló visszaáll 60 percre!"
        );
        if (figyelmeztetes == true) {
          clearInterval(timer);
          timer = false;
          ms = 0;
          s = 0;
          m = 60;
          stopwatchEl.textContent =
            (m < 10 ? "0" + m : m) +
            ":" +
            (s < 10 ? "0" + s : s) +
            ":" +
            (ms < 10 ? "0" + ms : ms);
        }
      }

如何使js计时器在重新加载页面时不重新启动？

How to make js timer not to restart when reload page?

javascript

refresh

timer

countdown