ページがリフレッシュされると、JavaScriptが内蔵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); 

次に、あなたは、タブを閉じて、しばらくたってから再度開く場合は、カウンタはそれがあった場所から再ロードされ、ユーザーは、タブを閉じるに取り組んでごまかすことができ、

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にtotal_secondsを作成する必要があります答えを出してもう一度開きます。このような状況に対処するには、localStorageではなく、実際の日付とローディングを使用してサーバーと連携することをお勧めします。プログラマユーザーは、devツールのコンソールからタイマーをリセットすることさえできます。