javascript - 避免在用户前后使用时重置 javascript 变量

Question

嗯，

我有一个倒数计时器，但我面临以下问题:

我的倒计时从 90 秒开始。例如，如果用户等到达到 2 秒，然后他使用浏览器的按钮返回，然后继续(返回同一页面)，倒计时在 90 秒重新开始，而不是我需要的 2，因为当计时器达到 0 我在发布表单的按钮上“单击”。

我知道我需要处理后退和前进按钮并使用新值设置我的变量，但我不知道该怎么做。任何帮助都会很棒。

我的代码如下:

var count = 90;
var screenCount = count;
var newCount = 0;
function countFunction() {

    if (screenCount != 0) {
    var minutes = Math.floor(count / 60);
    var seconds = count - minutes * 60;        
    if (count > 60){
        if (seconds < 10)
            seconds = "0" + seconds;
        screen = minutes + "m:" + seconds + "s";
        $('.timer').css('width',"120px")
    }
    else{            
        if (count < 10)
            screen = "0" + count;
        else
            screen = count + "s";            
        $('.timer').css('width',"60px")
    }
    document.getElementById('tempo').innerHTML = screen;
    if (count == 0) {
         set('temporizador', screenCount);
          $(":submit").removeAttr("disabled");
        $('#responder').click(); 

    }
    if (count != 0) {
         set('temporizador',screenCount - count );
        count = count - 1;
        setTimeout("countFunction()", 1000);
    }
    } 
    else {
        document.getElementById('tempo').innerHTML = '∞';

        set('temporizador', newCount);

         newCount++;
        setTimeout("countFunction()", 1000);
    }

}

Answer 1

当用户按回键时，将加载一个全新的页面，其中包含全新的 Javascript 上下文。如果您想将信息从一个页面的上下文传递到另一个页面的上下文，有几种方法可以做到。

在您的特定情况下，使用 LocalStorage 是最简单的:

// count down 90 seconds, including page navigation on this site
var count = +localStorage.getItem('timerCount') || 90;

function countDown() {
  count--;
  localStorage.setItem('timerCount', count);
  if (count<0) window.clearInterval(myInterval);
}

var myInterval = window.setInterval(countDown, 1000);

@DmitryVolokh 的建议

在这个例子中，我将剩余时间存储在 localStorage 中。如果您想跟踪从特定时刻开始耗时，最好存储开始时间并计算差值。