使用javascript的倒數計時器不應在重新加載時重新啟動

Question

我的結帳頁面中有一個計時器，在步驟1之后，我們有一個兩步的結帳，網頁重新加載到步驟2，因此計時器重新啟動。 我需要計時器才能繼續

這是我的代碼

這是javascript

 <input type="hidden" id="dealCost" name="dealCost" value="${model.dealCost}"/>
 <script type="text/javascript">
  var dealCst = document.getElementById('dealCost').value;

  if(dealCst < 53){
  zi_inceput1 = new Date();
  ceas_start1 = zi_inceput1.getTime();

  function initStopwatch1() {
      var timp_pe_pag1 = new Date();
      return ((timp_pe_pag1.getTime() + (1000 * 0) - ceas_start1) / 1000);
  }
  var tim = 1200;
  function getSecs1() {
      var tSecs1 = Math.round(initStopwatch1());
      if((tim-tSecs1)>=0)
      {
      var iSecs1 = (tim-tSecs1) % 60;

      var iMins1 = Math.round((tSecs1 - 30) / 60);
      var iHour1 = Math.round((iMins1 - 30) / 60);
      var iMins1 = iMins1 % 60;
      var min = Math.floor((tim-tSecs1) / 60);
      if(min<10){
         min = "0"+min;
      }
      var iHour1 = iHour1 % 24;
      var sSecs1 = "" + ((iSecs1 > 9) ? iSecs1 : "0" + iSecs1);
      var sMins1 = "" + ((iMins1 > 9) ? iMins1 : "0" + iMins1);
      var sHour1 = "" + ((iHour1 > 9) ? iHour1 : "0" + iHour1);
      document.getElementById('checkout_timer').innerHTML = min + ":" + sSecs1;
      window.setTimeout('getSecs1()', 1000);
  }
  else{
      window.location.href="/deals";
  }
  }
  window.setTimeout('getSecs1()', 1000);
  }
 </script>

這是HTML代碼

 <c:if test='${model.dealCost < 53}'>
 <div class="timer" style="float: right; width: 210px; font-size: 15px; margin-right: 20px;">
<div style="margin-top:20px;padding-bottom:5px;box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);background: white;overflow:none;">
    <div class="otherheadercheckout"><div class="otherheadertextcheckout"><img src="/images/little_white_shopping_cart-19x19.png">&nbsp;Timer</div></div>
    <p align="center">Time left to checkout</p>
    <div align="center" style="font-weight:600;">
        <span id="checkout_timer"></span>
    </div>

</div>

 </div>
 </c:if>

Answer 1

如果要將計時器的狀態從一頁加載保存到下一頁，則必須專門將計時器信息存儲在從一頁到下一頁持續存在的位置。 Javascript變量不會從一個頁面加載保存到下一個頁面-每次頁面加載時都會從頭開始對其進行初始化。

您的選擇是：

1. 服務器端：使用ajax將計時器狀態保存到您的服務器，以便可以將其放入后續頁面加載中。 這很麻煩，因為除非您知道用戶何時離開頁面，並且可以在那一刻將剩余時間可靠地保存到服務器，否則任何類型的計時器保存精度都將需要對服務器進行多次ajax調用以不斷節省時間。

2. 客戶端：通過Cookie或（在較新的瀏覽器中）本地存儲在本地存儲計時器狀態。 這很容易，但是很容易被黑客操縱（如果您願意的話）。