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

Question

I made (actually copy and made some changes) a javascript timer, but I don't know how to do that if i refresh the page the timer countinue counting...

You can find the code here:

 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>

Is there any easy way to do what I'm looking for?

Thanks for your help!

Answer 1

You could try to store the remaining time in localStorage and reference that on page load

Answer 2

You can set the value of the time before the window get unloded in the localstorage like this

<!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);
        }
      }

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

Question

2 answers

solution1
1 2020-04-29 16:22:35

solution2
1 ACCPTED 2020-04-29 17:01:01

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

Question

2 answers

solution1 1 2020-04-29 16:22:35

solution2 1 ACCPTED 2020-04-29 17:01:01

solution1
1 2020-04-29 16:22:35

solution2
1 ACCPTED 2020-04-29 17:01:01