Таймер встроен в javascript сбрасывается, когда страница обновляется

Question

У меня возникла проблема с хранением моего таймера в локальном хранилище. Каждый раз, когда я обновляю браузер, таймер сбрасывается. Теперь я хочу сохранить мой таймер в 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. Пользователь-программист может даже сбросить таймер с консоли в средствах dev.