我想单击一次按钮，每当我刷新页面时，计时器仍会继续计数答案

【问题标题】：I want to click the Button ONCE and whenever I refresh the page the timer will still continue to count up我想单击一次按钮，每当我刷新页面时，计时器仍会继续计数
【发布时间】：2020-03-06 16:53:37
【问题描述】：

当我点击开始按钮时，它会开始计数，但是当我刷新页面或重新启动浏览器时，它会停止计数，当我再次点击开始按钮时，它会继续计数。 我希望它只单击一次开始按钮并开始计数，每当我刷新页面或重新启动浏览器时，它仍会继续计数，直到我想停止它。

这是我的代码...

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

  $(document).ready(function() {

    $("#StartButton").click(function(){
    var savedDate = +localStorage.getItem("date"), date = new Date();

    console.log(savedDate)
    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() {
    var day = date.getDate();
    date.setSeconds(date.getSeconds()+1);

    if (day != date.getDate()) {
      alert("You're logged-in for 24 hours.");
      clearInterval(timer);
      localStorage.removeItem("date");
    }
      else {
        $span.text(
          pad(date.getHours()) + ":" +
          pad(date.getMinutes()) + ":" +
          pad(date.getSeconds())
        );
        console.log(date)
        localStorage.setItem("date",date.getTime())
      }
    }, 1000);
     }); 


     $("#StopButton").click(function(){
      alert("Stop..");
        clearInterval(timer);
        localStorage.removeItem("date");
      });
  });
</script>

<!DOCTYPE html>
<html>
  <head>
    <title>Countup persistently</title>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  </head>
  <body>
    <span id="countup">00:00:00</span>
    <button type="button" id="StartButton">Start</button>
    <button type="button" id="StopButton">Stop</button>
  </body>
</html>

【问题讨论】：

$("#StartButton").one(function(){...});.
为什么要两次调用此行：date.setSeconds(date.getSeconds()+1);
@MarioBoss 哦对不起.. 删除了第一个。

标签： javascript html timer local-storage

【解决方案1】：

这将需要重写代码的几个部分。但是这样做的方法是使用例如 window.localStorage 将计数器的 state 存储在客户端上。

你会做的是： * 在页面加载时读取 localStorage 的标志 * 如果标志设置开始计数 * 单击时切换此标志并将其存储在 localStorage 中

    const pad = num => ("0" + num).slice(-2);
    const savedDate = localStorage.getItem("date");
    let timer;

    function start() {
      let date = new Date();
      console.log(savedDate);

      if (savedDate) {
        date = new Date(savedDate);
      } else {
        date.setHours(0, 0, 0, 0);
      }

      localStorage.setItem("date", date);

      let $span = $("#countup");

      timer = setInterval(function() {
        let day = date.getDate();
        date.setSeconds(date.getSeconds() + 1);

        if (day !== date.getDate()) {
          alert("You're logged-in for 24 hours.");
          clearInterval(timer);
          localStorage.removeItem("date");
        } else {
          $span.text(
            pad(date.getHours()) +
              ":" +
              pad(date.getMinutes()) +
              ":" +
              pad(date.getSeconds())
          );
          console.log(date);
          localStorage.setItem("date", date);
        }
      }, 1000);
    }

    function stop() {
      alert("Stop..");
      clearInterval(timer);
      localStorage.removeItem("date");
    }

    $(document).ready(function() {
      $("#StartButton").click(start);
      $("#StopButton").click(stop);

      if (savedDate) {
        start();
      }
    });

【讨论】：

你能帮我看看怎么做吗？
我添加了一些示例代码，不过还有很大的改进空间