刷新页面时重置计时器javascript答案

【问题标题】：timer is reset when the page is refreshed javascript刷新页面时重置计时器javascript
【发布时间】：2020-04-19 20:10:37
【问题描述】：

我正在尝试制作一个测验计时器。但是，当页面刷新时，计时器会被重置，如何解决这个问题？

<html><h1>Js Timer</h1>
<div style="font-weight: bold;" id="quiz-time-left"></div>
<script type="text/javascript">
    var total_seconds = 60*2
    var c_minutes = parseInt(total_seconds/60);
    var c_seconds = parseInt(total_seconds%60);
    function CheckTime() {
        document.getElementById("quiz-time-left").innerHTML
        ='Time Left: ' + c_minutes + ' minutes ' + c_seconds + ' seconds' ;
        if (total_seconds <=0) {
            setTimeout('document.quiz.submit()',1);
        }else{
            total_seconds = total_seconds -1;
            c_minutes = parseInt(total_seconds/60);
            c_seconds = parseInt(total_seconds%60);
            
            setTimeout("CheckTime()",1000);
        }
    }
    setTimeout("CheckTime()",1000);
</script>
<form method="post" name="quiz" action="http://10.11.3.102/sisfo/pegawai/timer"></form>

【问题讨论】：

JavaScript 是客户端编程语言，这意味着任何用户都可以访问它。您需要将计时器放在服务器端或数据库中。您可以只存储开始时间，以便在每次刷新时只获得剩余时间。

标签： javascript php html codeigniter nan

【解决方案1】：

如果不需要服务器端定时器，你可以使用 localstorage 来存储定时器中剩余的时间，并在页面刷新时使用。

<html><h1>Js Timer</h1>
<div style="font-weight: bold;" id="quiz-time-left"></div>
<script type="text/javascript">

//Checking localstorage to check if timer is remaning
var total_seconds =window.localStorage.getItem('total_seconds');

    total_seconds = (total_seconds!=null && total_seconds>0)?total_seconds:60*2;
    var c_minutes = parseInt(total_seconds/60);
    var c_seconds = parseInt(total_seconds%60);
    function CheckTime() {
        document.getElementById("quiz-time-left").innerHTML
        ='Time Left: ' + c_minutes + ' minutes ' + c_seconds + ' seconds' ;
        if (total_seconds <=0) {
            setTimeout('document.quiz.submit()',1);

    //Clearing localstorage when reseting timer
    window.localStorage.clear('total_seconds');
        }else{
            total_seconds = total_seconds -1;
            c_minutes = parseInt(total_seconds/60);
            c_seconds = parseInt(total_seconds%60);

            setTimeout("CheckTime()",1000);
        }

    //Updating timer data in localstorage
    window.localStorage.setItem('total_seconds', total_seconds);
    }
    setTimeout("CheckTime()",1000);
</script>
<form method="post" name="quiz" action="http://10.11.3.102/sisfo/pegawai/timer"></form>

【讨论】：

亲爱的，用户可以更改local storage。
@RishiRaut 根据这里的问题，用户只想在页面刷新时保留计时器。如果基本座右铭是即使页面刷新也保留计时器，那么 localstorage 将达到目的。如果要求构建一个严格的计时器，则需要服务器端计时器验证。
@lalugde 如果答案对您有用，请将其标记为解决方案。

【解决方案2】：

请注意，每次重新加载页面时，都会从上到下编译/执行整个代码。一旦到达初始化部分：

var total_seconds = 60*2

var c_minutes = parseInt(total_seconds/60);

var c_seconds = parseInt(total_seconds%60);

total_seconds 重置为 60*2

如果您不想重置时间，则必须使用不会随页面重新加载的存储内存。那将是会话。

您可以使用 localStorage，但我不推荐它，因为即使在浏览器关闭时它也会保留变量。

sessionStorage 信息可以在 w3schools here 上找到。

// 存储

sessionStorage.setItem("lastname", "Smith");

// 检索

document.getElementById("result").innerHTML = sessionStorage.getItem("lastname");

当您关闭浏览器选项卡或关闭浏览器时，此数据会重置。

【讨论】：