Timer built in javascript resets when page is refresh

Question

I am having a problem on storing my timer in a localStorage. Everytime I refresh the browser, the timer resets. Now what I want to do is to store my timer in a localStorage so everytime the user refreshes the browser the timer wont reset. Please check my code below

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

First, change setTimeout to setInterval , which will be executed upon each second instead of manually calling setTimeout on each instance:

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);

Next, you need to write total_seconds into the 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);

Finally, if you close the tab and reopen it after a while, the counter will reload from where it was and the user could cheat by closing the tab, working on the answer and opening it again. To cope with this situation, it is recommendable to cooperate with the server, that is, working with an actual date and loading based on that instead of using localStorage . A programmer user might even reset the timer from the console in the dev tools.