刷新浏览器页面和倒数计时器时不应继续

Question

查看：

    <div class="box-body">
        <h2><p style="float: right" id="countdown"></p></h2>
    </div>

<script>
  $time_limit = $("#time_limit").val();      //2016-08-14 00:10:00
    var d = new Date($time_limit);
    var hours = d.getHours();                  //00 hours
    var minutes = d.getMinutes();              //10 minutes
    var seconds = 60 * minutes;                // 600seconds

    function secondPassed() {
        var minutes = Math.round((seconds - 30) / 60);
        console.log(minutes);
        var hours = Math.round((minutes) / 60);
        var remainingSeconds = seconds % 60;
        if (remainingSeconds < 10) {
            remainingSeconds = "0" + remainingSeconds;
        }
        document.getElementById('countdown').innerHTML = hours + ":" + minutes + ":" + remainingSeconds;
        if (seconds == 0) {
            clearInterval(myVar);
            document.getElementById('countdown').innerHTML = "Time Out";
        } else {
            seconds--;
            console.log(seconds);
        }

    }
    var myVar = setInterval(secondPassed, 1000);

</script>

我的问题：当我浏览页面刷新和倒数计时器不应该继续时，我点击下一步按钮，浏览器页面刷新和倒数计时器不应该继续.................. .....................................

Answer 1

如果你需要坚持这种情况，你需要将数据保存到浏览器的localstorage中，否则它总是在刷新后被清除。我准备了一个例子。你可以在这里找到它：

Countdown with Storage

必要的代码如下：

if (typeof(Storage) !== "undefined") { // checks if localStorage is enabled
   if (localStorage.seconds) {         // checks if seconds are saved to localstorage
      seconds = localStorage.seconds;  // grabs the data from localstorage
   }
}

使用这段代码，您最初可以从localstorage获取数据。我把它放在你的函数上面，以便在设置启动后的所有内容后立即调用它。

另一部分是保存数据。这段代码负责此目的：

if (typeof(Storage) !== "undefined") {
   localStorage.setItem("seconds", seconds);
}

您再次检查存储是否可用，然后将秒设置为disred值。

最后一步是在时间到期后清除localstorage：

if (typeof(Storage) !== "undefined") {
  localStorage.removeItem("seconds");
}

再次，检查存储是否存在，然后删除名称为秒的项目。另一种可能性是检查存储是否存在，并告诉用户数据不是持久存在或使用cookie。

Answer 2

react-router