页面刷新时内置在JavaScript中的计时器重置

Question

我在将本地计时器存储在localStorage中时遇到问题。每次刷新浏览器时，计时器都会重置。现在我想要做的就是将我的计时器存储在localStorage中，因此每次用户刷新浏览器时计时器都不会重置。请检查下面

HTML我的代码

<p class="w3-xlarge w3-serif"> <i>Linguistics Exam</i><span class="w3-right" id="timeLeft" name="timeLeft"></span></p> 

JS

var total_seconds = 40*60; 
var c_minutes = parseInt(total_seconds/60); 
var c_seconds = parseInt(total_seconds%60); 

function checkTime(){ 
    document.getElementById("timeLeft").innerHTML = 'Time Left: ' + c_minutes + ' : ' + c_seconds; 

    if(total_seconds <= 0){ 
     $(document).ready(function(){$("#submitLinguistics").click();}); 

    }else{ 
     total_seconds = total_seconds - 1; 
     c_minutes = parseInt(total_seconds/60); 
     c_seconds = parseInt(total_seconds%60); 
     setTimeout("checkTime()", 1000); 
    } 
} 
setTimeout("checkTime()", 1000); 

Answer 1

首先，更改setTimeout到setInterval，这将在每一秒，而不是手动调用每个实例setTimeout执行：

var total_seconds = 40*60; 
var c_minutes = parseInt(total_seconds/60); 
var c_seconds = parseInt(total_seconds%60); 

function checkTime(){ 
document.getElementById("timeLeft").innerHTML = 'Time Left: ' + c_minutes + ' : ' + c_seconds; 

if(total_seconds <= 0){ 
    $(document).ready(function(){$("#submitLinguistics").click();}); 
    clearInterval(myInterval); 
}else{ 
    total_seconds = total_seconds - 1; 
    c_minutes = parseInt(total_seconds/60); 
    c_seconds = parseInt(total_seconds%60); 
} 
} 
var myInterval = setInterval(checkTime, 1000); 

接下来，你需要写total_seconds到localStorage：

var total_seconds = localStorage.getItem("total_seconds") ? localStorage.getItem("total_seconds") : 40*60; 
var c_minutes = parseInt(total_seconds/60); 
var c_seconds = parseInt(total_seconds%60); 

function checkTime(){ 
document.getElementById("timeLeft").innerHTML = 'Time Left: ' + c_minutes + ' : ' + c_seconds; 

if(total_seconds <= 0){ 
    $(document).ready(function(){$("#submitLinguistics").click();}); 
    clearInterval(myInterval); 
}else{ 
    total_seconds = total_seconds - 1; 
    c_minutes = parseInt(total_seconds/60); 
    c_seconds = parseInt(total_seconds%60); 
} 
localStorage.setItem("total_seconds", total_seconds); 
} 
var myInterval = setInterval(checkTime, 1000); 

最后，如果你关闭该选项卡，一段时间后重新打开时，计数器将在原处重新加载，而用户可以通过关闭选项卡，工作骗答案并再次打开。为了应对这种情况，建议与服务器合作，即根据实际日期和负载进行工作，而不是使用localStorage。程序员用户甚至可以在开发工具中从控制台重置定时器。