javascript - 如何防止计时器在浏览器刷新时重置？

Question

如何让计时器在浏览器刷新时不重置？

我使用blog=blogger

我的问题是，当我按刷新时，计时器会重新启动到原始时间。如何让计时器在点击刷新按钮或关闭浏览器时不重置？

这里是示例 1:http://topbitcoinfaucet2.blogspot.com

请举个例子。抱歉，我是 javascript 新手。

function secondsTimeSpanToHMS(s) {
 var h = Math.floor(s/3600);
 s -= h*3600;
 var m = Math.floor(s/60);
 s -= m*60;
 return h+":"+(m < 10 ? '0'+m : m)+":"+(s < 10 ? '0'+s : s);
}
$(function() {

 $(".flink").click(function() {
  var timer = $(this).parent().parent().find('.timer');
  if(timer.data('secleft') <= 0) {
   timer.data('secleft', timer.data('minutes') * 60 + 20);
 $(this).parent().fadeTo(300,0.3);
 
  }
 });
 var lasttime = Math.round($.now() / 1000);
 var curtime = Math.round($.now() / 1000);
 function timer(){
  curtime = Math.round($.now() / 1000);
  $(".timer").each(function(){
   if($(this).data('secleft') > 0) {
    $(this).data('secleft', $(this).data('secleft') - (curtime - lasttime));
    $(this).text(secondsTimeSpanToHMS($(this).data('secleft')));
   } else {
    if($(this).text()!=$("#language").data('ready')) {
     $(this).text($("#language").data('ready'));
     $(this).parent().prev().fadeTo(300,1);
     $(this).parent().prev().prev().fadeTo(300,1);
    }
   }
  });
  lasttime = curtime;
  setTimeout(timer, 1000);
 }
 timer();


});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<DIV CLASS="box" STYLE="width:100%"><TABLE STYLE="width:100%"><TR><TH STYLE="width:220px">link</TH><TH STYLE="width:140px">foryou</TH><TH STYLE="width:140px">Timer</TH><TH/></TR><TR><TD><A CLASS="flink" HREF="https://www.google.com" TARGET="_blank">mylink</A></TD><TD>hi</TD><TD><SPAN CLASS="timer" data-minutes="1" data-secleft="0">Ready</SPAN></TD></TR><TR><TD><A CLASS="flink" HREF="https://www.google.com" TARGET="_blank">mylink</A></TD><TD>hi</TD><TD><SPAN CLASS="timer" data-minutes="1" data-secleft="0">Ready</SPAN></TD></TR>
</TABLE></DIV>

Answer 1

您可以使用 Javascript 本地存储来执行此操作。这是从我在这里发布的另一个答案粘贴的:Time an event using javascript/jquery

<小时/>

You can use session storage to accomplish this. Javascript Storage data persists across pages and refreshes. Here is some info: http://www.w3schools.com/html/html5_webstorage.asp

// SET THIS ON THE FIRST VISIT. CHECK IF ALREADY SET.
if(typeOf(localStorage.getItem('timer')) == 'undefined'){
  localStorage.setItem("timer", "0");
}

setInterval(function(){ 
  //  ADD 1 SECOND TO SESSION TIMER
  localStorage.setItem("timer", localStorage.getItem("timer")++);

  if(localStorage.getItem("timer") == 30){
    // TRIGGER YOUR EVENT ON 30 SECONDS
  }
}, 1000);