不上刷新

Question

重新啓動的Jquery/JavaScript的計時器，這是我對SO :)

我需要在jQuery的一個定時器或JavaScript會倒計時15分鐘，比顯示關閉按鈕的第一個問題。另外，當用戶刷新頁面時，它不應該重置，但要麼繼續它停止的地方，要麼完成倒計時，而不取決於用戶是否回來，即如果用戶在16分鐘後返回，他將看到消息和關閉按鈕。有什麼建議麼？

非常感謝！

Answer 1

多個選項使用卸載方法，保留時間值轉換成瀏覽器的數據存儲： - 餅乾 - localStorage的等

理想的方式 - 保存在用戶會話啓動服務器上的工作流的時間目的。 每當頁面重新加載發生得值/經過時間的用戶界面，並顯示適當的消息

Answer 2

試試這個，它使用jquery-cookie，你必須下載並在您的腳本，並適用於所有的主流瀏覽器：

/* get the time passed from the cookie, if one is set */ 
var count = parseInt(($.cookie('mytimeout') || 0), 10); 

/* set an interval that adds seconds to the count */ 
var interval = setInterval(function() { 
    count++; 
    /* plus, you can do something you want to do every second here, 
    like display the countdown to the user */ 
}, 1000); 

/* set a timeout that expires 900000 Milliseconds (15 Minutes) - 
    the already passed time from now */ 
var timeout = setTimeout(function() { 
    /* put here what you want to do once the timer epires */ 

    /* clear the Interval */ 
    clearInterval(interval); 
}, 900000 - count*1000); 

/* before the window is reloaded or closed, store the current timeout in a cookie. 
    For cookie options visit jquery-cookie */ 
window.onbeforeunload = function() { 
    $.cookie('mytimeout', count, { expires: 7, path: '/' }); 
}; 

Here's a jsfiddle to see it working

And here's a version with buttons to start and reset

如果您希望的時間通過即使用戶不在頁面上，你可以使用new Date().getTime()獲取一次訪問和下次訪問之間傳遞的毫秒數。因此，改變這種：

/* get the last time the user visited the page */ 
var lastTime = parseInt(($.cookie('timepassed') || new Date().getTime()), 10); 

/* add elapsed time to the count. If the count is negative, set it to 0 */ 
var count = Math.max(parseInt(($.cookie('mytimeout') || 0), 10) + parseInt((new Date().getTime() - lastTime)/1000, 10), 0); 

/* set the time passed on unload */ 
window.onbeforeunload = function() { 
    $.cookie('mytimeout', count, { expires: 7, path: '/' }); 
    $.cookie('timepassed', new Date().getTime(), { expires: 7, path: '/' }); 
}; 

And yet another jsfiddle

重要：這是不是安全的，用戶可以操縱計數，但如果你想要做安全的腳本，JS是不是它的工具。

UPDATE

A version with hours, minutes and seconds

Answer 3

下面是該一個localStorage溶液。但是當你從評論看，你可以操縱該定時器，很容易

當用戶不在頁面上，計時器將不會倒計時。它只是記得櫃檯離開時的狀態。但你知道基本的想法。您可以Date.getTime()那種情景，以改善它：P

var updateTimer = function() { 
    timer = localStorage.getItem('timer') || 0; 
    if (timer === 0) { 
     $("div#timer").html("Timer is unset"); 
    } else { 
     timer--; 
     localStorage.setItem('timer', timer); 
     $("div#timer").html(timer); 
    } 
}; 

$(function() { 
    setInterval(updateTimer, 1000); 
    $("#start").click(function() { 
     localStorage.setItem('timer', 500); 
    }); 
}); 

http://jsbin.com/oqamil/1/edit