刷新页面时内置的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 。 程序员用户甚至可以从开发工具的控制台中重置计时器。