Javascript 在JS或Jquery中单击启动计时器，页面刷新时没有重置时间？

我正在尝试创建一个倒计时计时器，它将在单击按钮时启动 屏幕上会显示30分钟，一旦用户单击开始，它就应该开始了

如果用户刷新页面，则不应重置时间

停止按钮停止计数器

我可以创建第1部分，但每次都会重置它

这是我的密码：

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>


 <a href="#" id="startClock">Start Clock</a>


 <span id="count">50</span> seconds

 <script>


 function startTimer(){
 var counter = 50;
  setInterval(function() {
   counter--;
  if (counter >= 0) {
  span = document.getElementById("count");
  span.innerHTML = counter;
}
if (counter === 0) {
    alert('sorry, Lab Ended');
    clearInterval(counter);
}
  }, 1000);
 }
$("#startClock").click(function(){
startTimer();
 });

 </script>

50秒
函数startTimer（）{
var计数器=50；
setInterval（函数（）{
计数器--；
如果（计数器>=0）{
span=document.getElementById（“计数”）；
span.innerHTML=计数器；
}
如果（计数器==0）{
警报（“对不起，实验室结束”）；
清除间隔（计数器）；
}
}, 1000);
}
$（“#开始锁定”）。单击（函数（）{
startTimer（）；
});

您应该做的是提前30分钟计算时间戳并将其保存到本地存储。当页面加载时，您应该首先查看本地starage以检查是否有正在运行的计时器，如果有，则显示它以倒计时开始间隔，如果没有，则计算时间戳，将其保存到本地存储并开始倒计时

 function startTimer(){
  var counter = 1800000;
   setInterval(function() {
     counter--;
    if (counter >= 0) {
     localStorage.setItem("counter", counter);
     span = document.getElementById("count");
     span.innerHTML = localStorage.getItem("counter");
     counter = $('#count').text();
     }
     if (counter == 0) {
       alert('sorry, Lab Ended');
       clearInterval(counter);
       localStorage.clear('counter');
     }
    }, 1000);
   }
   $("#startClock").click(function(){
     startTimer();
    });

---

您可以尝试本地存储来实现这一点，希望上面的代码能够帮助您。

您可以尝试使用

window.localStorage.setItem（key，value）

保存计数器状态，稍后使用

window.localStorage.getItem（key）

获取计数器状态。如果计数器已完成，则可以使用

window.localStorage.removietem（key）

从localStorage中删除计数器

使用暂停和重新启动功能尝试以下代码：

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

 <a href="#" id="restartClock">Restart Clock</a>
 <a href="#" id="startClock">Start Clock</a>
 <a href="#" id="pauseClock">Pause Clock</a>


 <span id="count">50</span> seconds

 <script>
   var initialValue = 50;
   $(document).ready(function() {
     var counter = localStorage.getItem("counter");
     var canCount = true;
     var id;
     if (counter) {
       $("span#count").html(counter);
     } else {
       localStorage.setItem("counter", initialValue);
       counter = initialValue;
       $("span#count").html(initialValue);
     }

     function startTimer() {
       if (localStorage.getItem("counter") && id === undefined) {
         id = setInterval(function() {
           if (canCount) {
             localStorage.setItem("counter", --counter);
             span = document.getElementById("count");
             span.innerHTML = counter;
             if (counter <= 0) {
               localStorage.removeItem("counter")
               clearInterval(id);
               id = undefined;
             }
           }
         }, 1000);
       }
     }

     $("#startClock").click(startTimer);

     $("#restartClock").click(function(){
        counter = initialValue;
        localStorage.setItem("counter", counter);
        $("span#count").html(counter);
     });

     $("#pauseClock").click(function() {
       $(this).html(canCount?"Continue Clock":"Pause Clock");
       canCount = !canCount;
     });
   });

 </script>

50秒
var初始值=50；
$（文档）.ready（函数（）{
var counter=localStorage.getItem（“计数器”）；
var canCount=真；
变量id；
如果（计数器）{
$（“span#count”）.html（计数器）；
}否则{
setItem（“计数器”，初始值）；
计数器=初始值；
$（“span#count”）.html（初始值）；
}
函数startTimer（）{
if（localStorage.getItem（“计数器”）&&id==未定义）{
id=setInterval（函数（）{
if（canCount）{
setItem（“计数器”，--计数器）；
span=document.getElementById（“计数”）；
span.innerHTML=计数器；
如果（计数器）中的任何一个不适用于您？我尝试了所有链接，要么它们没有按钮单击开始，要么时间在页面加载上不可见不全部但超过20次我尝试了当我们无法帮助时，此一般问题的答案将与您已经阅读的相同。请显示您尝试真正存储计时器值的情况（对于
localStorage
或cookie或数据库或您尝试过的任何内容），我们可能可以修复。我尝试了本地存储，但不起作用，您能帮我保存什么到本地存储中吗？我将保存
const finalTime=new Date（）.getTime+1000*60*30
然后您就可以知道最后还有多少剩余。如果您发布本地存储，请尝试，我将能够更正它