如何在頁面刷新後繼續定時器？

Question

目前，我有這個JavaScript在我的代碼

function startTimer(duration, display) { 
 
    var timer = duration, 
 
     minutes, seconds; 
 
    setInterval(function() { 
 
    minutes = parseInt(timer/60, 10); 
 
    seconds = parseInt(timer % 60, 10); 
 

 
    minutes = minutes < 10 ? "0" + minutes : minutes; 
 
    seconds = seconds < 10 ? "0" + seconds : seconds; 
 

 
    display.textContent = minutes + ":" + seconds; 
 

 
    if (--timer < 0) { 
 
     timer = 0; 
 
    } 
 
    }, 1000); 
 
} 
 

 
window.onload = function() { 
 
    var fiveMinutes = 60 * 0.18, 
 
     display = document.querySelector('#time'); 
 
    startTimer(fiveMinutes, display); //`enter code here` 
 
};

<div id="time"></div>

如何保持我的定時器運行，當我刷新？使用cookie是唯一的方法？

Answer 1

這只是如何製作餅乾的指針，這裏是工作代碼。看看這裏的小提琴：https://jsfiddle.net/edencorbin/hht4yqka/1/您需要調整計時器，我已將它設置爲10:00。

<script> 
    var minutes = 0; 
    var seconds = 0; 
    function startTimer(duration, display) { 
    var timer = duration, 
     minutes, seconds; 
    setInterval(function() { 
     minutes = parseInt(timer/60, 10); 
     seconds = parseInt(timer % 60, 10); 

     minutes = minutes < 10 ? "0" + minutes : minutes; 
     seconds = seconds < 10 ? "0" + seconds : seconds; 

     display.textContent = minutes + ":" + seconds; 

     setCookie("minutes", minutes.toString(), 1); 
     setCookie("seconds", seconds.toString(), 1); 

     if (--timer < 0) { 
     timer = 0; 
     } 
    }, 1000); 
    } 


    window.onload = function() { 
    var minutes_data = getCookie("minutes"); 
    var seconds_data = getCookie("seconds"); 
    var timer_amount = (60*10); //default 
     if (!minutes_data || !seconds_data){ 
     //no cookie found use default 
     } 
     else{ 
     timer_amount = parseInt(minutes_data*60)+parseInt(seconds_data) 
     } 

    var fiveMinutes = timer_amount, 
     display = document.querySelector('#time'); 
    startTimer(fiveMinutes, display); //`enter code here` 
    }; 

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

    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) == 0) return c.substring(name.length,c.length); 
    } 
    return ""; 
    } 

    </script> 

    <div id="time"></div> 

Answer 2

我認爲Cookie是你最好的選擇，如果你沒有類似的數據庫服務器端和/或用戶沒有登錄：

這可能會幫助你開始，定義和設置得到每

SET

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

的cookie功能GET

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) == 0) return c.substring(name.length,c.length); 
} 
return ""; 
} 

某處在文檔中，也許在你的計時器，請將您的餅乾一樣的東西：

setCookie("minutes", minutes.toString(), 1); 
setCookie("seconds", seconds.toString(), 1); 

然後在某處你的負載情況下通過get函數類似設置的變量：

minutes = getCookie("minutes"); 
seconds = getCookie("seconds"); 

閱讀更多這裏http://www.w3schools.com/js/js_cookies.asp