頁面刷新時內置在JavaScript中的計時器重置

我在將本地計時器存儲在localStorage中時遇到問題。每次刷新瀏覽器時，計時器都會重置。現在我想要做的就是將我的計時器存儲在localStorage中，因此每次用戶刷新瀏覽器時計時器都不會重置。請檢查下面頁面刷新時內置在JavaScript中的計時器重置

HTML我的代碼

<p class="w3-xlarge w3-serif"> <i>Linguistics Exam</i><span class="w3-right" id="timeLeft" name="timeLeft"></span></p>

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

來源

2017-02-15 Angelo Saño

你的代碼在哪裏保存到'localStorage'？ –

首先，更改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。程序員用戶甚至可以在開發工具中從控制檯重置定時器。

來源

2017-02-15 09:02:24

謝謝主席拉霍斯。它爲我工作。但是我給每個用戶都給了不同的定時器一個問題。我搜索它並使用sessionStorage來代替。不幸的是，使用sessionStorage也不會重置計時器，即使是針對另一個用戶。沒有與服務器合作的任何解決方案？謝謝你sir –

@AngeloSaño你可以使用localStorage.getItem（「total_seconds」+ theusername）和localStorage.setItem（「total_seconds」+ theusername，total_seconds）;實現這一目標。但是，如果不同的用戶使用不同的瀏覽器，那麼他們的localStorage將會不同。 localStorage是瀏覽器的本地存儲，每個瀏覽器都不相同。如果我的回答幫助你解決了這個問題，那麼你可以考慮接受它是正確的。 –

謝謝先生拉霍斯！對不起，我馬上就不接受新手，但它確實幫助我解決了我的問題。 –

頁面刷新時內置在JavaScript中的計時器重置

回答

相關問題