Question

我已经在javascript中编写了一个代码，用于在时间到了时提交表单的计时器。问题是如果用户刷新页面，重置计时器怎么能避免这种情况发生？

    <script type="text/javascript">
    var total_seconds = 6*1;
    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)
{
        document.forms['quiz'].submit();
    } 
else
 {
    total_seconds = total_seconds -1;
    c_minutes = parseInt(total_seconds/60);
    c_seconds = parseInt(total_seconds%60);
    setTimeout("CheckTime()",1000);
    }
}
    setTimeout("CheckTime()",0);
    </script>

Answer 1

使用window.localStorage可能是另一种选择：

重要提示：不要使用函数setTimeout，而是使用setInterval来避免手动重复调用函数CheckTime，进一步使用camelcase for function＆name。
检查 sessionStorage 属性。

var total_seconds = 6 * 1;
var currentMinutes = window.localStorage.getItem('currentMinutes');
var currentSeconds = window.localStorage.getItem('currentSeconds');

var c_minutes = currentMinutes ? parseInt(currentMinutes) : parseInt(total_seconds / 60);
var c_seconds = currentSeconds ? parseInt(currentSeconds) : parseInt(total_seconds % 60);

var intervalId;
function checkTime() {
  document.getElementById("quiz-time-left").textContent = 'Time Left: ' + c_minutes + ' minutes ' + c_seconds + ' seconds ';

  if (total_seconds <= 0) {
    //document.forms['quiz'].submit();
    console.log("Time is up!");
    console.log("Submitting...");
    clearInterval(intervalId);

    // Clean the current values
    window.localStorage.removeItem('currentMinutes');
    window.localStorage.removeItem('currentSeconds');
  } else {
    total_seconds = total_seconds - 1;
    c_minutes = parseInt(total_seconds / 60);
    c_seconds = parseInt(total_seconds % 60);

    // Store the new calculated minutes and seconds
    window.localStorage.setItem('currentMinutes', c_minutes);
    window.localStorage.setItem('currentSeconds', c_seconds);
  }
}

intervalId = setInterval(checkTime, 1000);

<强> window.localStorage

只读的localStorage属性允许您访问Document的源文件的Storage对象;存储的数据将保存在浏览器会话中。 localStorage类似于 sessionStorage ，但是当存储在localStorage中的数据没有到期时间时，存储在sessionStorage中的数据会在页面会话结束时清除 - 也就是说，当页面关闭时。
<强> window.sessionStorage

sessionStorage属性允许您访问当前源的会话存储对象。 sessionStorage类似于 window.localStorage ;唯一的区别是当存储在localStorage中的数据没有设置到期时，存储在sessionStorage中的数据会在页面会话结束时被清除。只要浏览器处于打开状态，页面会话就会持续，并且会在页面重新加载和恢复后继续存在。 在新标签页或新窗口中打开页面会导致启动新会话，这与会话Cookie的工作方式不同。

即使用户刷新页面，我也不想更改值

1 个答案: