如何防止我的计时器在浏览器刷新时重置

您可以使用 Javascript 本地存储来执行此操作。这是粘贴自我在这里发布的另一个答案：使用 javascript/jquery 对事件进行计时

您可以使用会话存储来实现此目的。Javascript Storage 数据跨页面和刷新保留。以下是一些信息： 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);

我想最好的解决方案是在服务器端保存计时器的值。

如果你想在Javascript中做到这一点，将计时器的值保存到cookie是一个可能的灵魂。

你可以阅读饼干

var x = document.cookie;

并写到饼干

document.cookie="username=John Doe";

看看这里：http://www.w3schools.com/js/js_cookies.asp

希望有帮助。

干杯

您需要保存单击链接的时间或倒计时的时间。观看演示：https://jsfiddle.net/flocsy/moecr2xn/2/

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');
  var id = timer.data('id');
  if(timer.data('secleft') <= 0) {
   timer.data('secleft', timer.data('minutes') * 60 + 20);
   $(this).parent().fadeTo(300,0.3);
  }
  // here you need to calculate the timestamp of the time you count down to and save it.
  // note that you'll have to save it per link!
  var now = (new Date()).getTime();
  var ts = now + (parseInt(timer.data('minutes')) * 60 + 20)*1000;
console.log(ts, now, ts-now);
  localStorage.setItem('timestamp_' + id, ts);
 });
 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);
 }
  // when loading the page check if for any .flink we already
  // saved a timer before the refresh:
  $(".timer").each(function(){
var timer = $(this);
var id = timer.data('id');
var ts = localStorage.getItem('timestamp_' + id);
var now = (new Date()).getTime();
console.log(id, ts, now, ts-now);
if (ts && ts > now) {
   // if found, we set the secleft of the timer by calculating
   // how much time is 'till the countdown
   var secleft = Math.round((ts - now)/1000);
console.log("secleft:",secleft);
   timer.data('secleft', secleft);
}
  });
  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-id="id1" 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-id="id2" data-minutes="1" data-secleft="0">Ready</SPAN></TD></TR>
</TABLE></DIV>

一般来说，我建议不要依赖于自上次调用计时器以来经过的时间，而是计算剩余的时间。

您可以尝试在页面刷新之前将计时器保存在本地存储中。

$(function() {
    var timer = window.localStorage.getItem('timer') || 0;
    // some stuff with your timer
    $(window).on('beforeunload',function(){
        window.localStorage.setItem('timer', timer)
    });
});