CODEWITHSUNDEEP
javascriptjquerytimer
Angelo Saño
Angelo Saño

Reputation: 15

Timer built in javascript resets when page is refresh

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

Upvotes: 1

Views: 1397

Answers (1)

Lajos Arpad
Lajos Arpad

Reputation: 76426

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.

Upvotes: 3

Related Questions