我使用了倒計時器，但它自行重置

Question

每當我刷新頁面時，計時器都會重置。 它從一開始就開始。 我使用了名為countdown.js的插件

這是代碼：

<script type="text/javascript">
  var now = new Date();
    var countTo = 30 * 24 * 60 * 60 * 1000 + now.valueOf();
    $('.timer').countdown(countTo, function(event) {
        var $this = $(this);
        switch(event.type) {
            case "seconds":
            case "minutes":
            case "hours":
            case "days":
            case "weeks":
            case "daysLeft":
                $this.find('span.'+event.type).html(event.value);
                break;
            case "finished":
                $this.hide();
                break;
        }
    });
</script>


<div class="col-md-8 col-md-offset-3 timer">
    <div class="days-wrapper" style="text-align:center;">
        <span class="days"></span> 
        <p style="margin-left:-80px;"><br><br>DAYS</p>
    </div>
    <div class="hours-wrapper" style="text-align:center;">
        <span class="hours"></span> 
        <p style="margin-left:-80px;"><br><br>HOURS</p>
    </div>
    <div class="minutes-wrapper" style="text-align:center;">
        <span class="minutes"></span> 
        <p style="margin-left:-80px;"><br><br>MIN</p>
    </div>
</div>

Answer 1

每當你重新加載頁面javascripts“forgots”時，無論你以前做過什么，你的代碼都是從頭開始執行的。

一種可能的解決方案是使用一些持久存儲方法，例如localStorage

在您的示例中，您可以執行以下操作：

var previousCountTo = localStorage.getItem('time'); 
var now = new Date(); 
var countTo = previousCountTo?parseInt(previousCountTo, 10):(30 * 24 * 60 * 60 * 1000 + now.valueOf());
localStorage.setItem('time', countTo); // Save the current time.
$('.timer').countdown(countTo, function(event) {
      var $this = $(this);
    console.log(event);
      switch(event.type) {
          case "seconds":
          case "minutes":
          case "hours":
          case "days":
          case "weeks":
          case "daysLeft":
              $this.find('span.'+event.type).html(event.value);
              break;
          case "finished":
              $this.hide();
              localStorage.removeItem('time'); // once finished, remove the timer.
              break;
      }
});

Answer 2

當JavaScript在瀏覽器中執行時，其執行范圍僅限於加載頁面的生命周期。

卸載頁面后，將丟棄所有狀態，包括變量和計時器。 所以答案是你不能那樣做 。

PS：卸載頁面后無法保留變量狀態。 這並不意味着你可以在邊緣得不到狀態。 請參閱@ tehsis的優秀答案 。