將當前計時器的計時傳遞到下一頁

Question

如何將當前計時器的計時傳遞到下一頁？

定時器代碼

var expires = new Date(); 

expires.setSeconds(expires.getSeconds() + 60); // set timer to 60 seconds 
var counter = setInterval(timer, 1); 

function timer() { 
    var timeDiff = expires - new Date(); 

    if (timeDiff <= 0) { 
     clearInterval(counter); 
     document.getElementById("timer").innerHTML = "00:00"; 
     return; 
    } 

    var seconds = new Date(timeDiff).getSeconds();  
    var milliSeconds = (new Date(timeDiff).getMilliseconds()/10).toFixed(0); 

    var seconds = seconds < 10 ? "0" + seconds: seconds; 
    var milliSeconds = milliSeconds < 10 ? "0" + milliSeconds: milliSeconds; 

    document.getElementById("timer").innerHTML = seconds + ":" + milliSeconds; // watch for spelling 
} 

我在我的HTML中使用

<h3 style="color: #ff0000; margin: 0; padding: 0; font-size: 100%;font-weight:normal; font-family: robotolight;"> You have <div id="timer"></div> to complete the game! 

。

有沒有辦法將div id ='timer'>傳入下一頁？

謝謝。

Answer 1

重新加載頁面或加載新頁面意味着重新加載JavaScript，因爲它運行在當前頁面的上下文中。有很好的方法可以將JavaScript變量傳遞到新頁面;它需要某種形式的數據持久性。 Cookies和localStorage是堅持數據客戶端最常用的兩種方式。

客戶端Cookie被寫入瀏覽器緩存，並且在HTTP標頭中是透明的。 LocalStorage是一種較新的機制，但受到很好的支持，允許5MB的瀏覽器存儲，而不需要傳遞標題。

在您的用例中，不是存儲計時器，而是在計時器啓動時存儲時間戳。這樣就可以在下一頁從這個靜態起始值重新計算它。

var timerStart; 
var expireDate = new Date(); 

function displayTimer(){ 
    var now = new Date().getTime(); 
    var timerStart = timerStart || cookieTimer(); 
    val timeDiff = now - timerStart; 

    document.getElementById("timer").innerHTML = timeDiff.toString(); 

    if(timeDiff > expireDate.getTime()) clearInterval(timerInterval); 
} 

val timerInterval = setInterval(displayTimer, 1); 


// Using cookies 
function cookieTimer(){ 

    function getCookie(cname) { 
     var name = cname + "="; 
     var ca = document.cookie.split(';'); 
     for(var i=0; i<ca.length; i++) { 
      var c = ca[i]; 
      while (c.charAt(0)==' ') c = c.substring(1); 
      if (c.indexOf(name) != -1) return c.substring(name.length,c.length); 
     } 
     return ""; 
    } 

    function setCookie(cname, cvalue, expireDate) { 
     var d = new Date(); 
     d.setTime(d.getTime() + expireDate.getTime()); 
     var expires = "expires="+d.toUTCString(); 
     document.cookie = cname + "=" + cvalue + "; " + expires; 
    } 

    var timerCookie = getCookie("timer"); 

    if(timerCookie !== "") return new Date(timerCookie).getTime()); 
    else { 
     setCookie("timer", timerStart, expireDate); 
     return new Date().getTime(); 
    } 
} 



// Using localStorage 
function localStorageTimer(){ 
    function setLocalStorageObject(key, obj, expireDate){ 
     obj.expires = expireDate.getTime(); 
     localStorage.setItem(key, JSON.stringify(obj)); 
    } 

    function getLocalStorageObject(key){ 
     val item = localStorage.getItem(key); 
     if(item) return JSON.parse(item); 
     else return {}; 
    } 

    var timerLocal = getLocalStorageObject("timer"); 
    var now = new Date().getTime(); 

    if(timerLocal && timerLocal.startTime && timerLocal.expires > now) return timerLocal.startTime; 
    else { 
     setLocalStorageObject("timer", { startTime: now }); 
     return now; 
    } 
}