таймер Jquery/Javascript, что не перезагружается при обновлении

Question

это мой первый вопрос на SO :)

Мне нужен таймер в JQuery или JavaScript, который будет обратный отсчет 15 минут, и чем показывать кнопку закрытия. Кроме того, когда пользователь обновляет страницу, он не должен сбрасываться, но либо продолжать, когда он останавливается, либо заканчивает обратный отсчет, не зависящий от того, вернулся ли пользователь, т. Е. Если пользователь вернется через 16 минут, он увидит сообщение и кнопку закрытия. Какие-либо предложения?

СПАСИБО ВАС ОЧЕНЬ МНОГО!

Answer 1

Несколько вариантов сохраняются значения времени в datastorage в браузере с помощью метода разгрузки: - Печенье - LocalStorage и т.д.

Идеальный способ - сохранить время запуска рабочего процесса на сервере в сеансе пользователя объект. Всякий раз, когда перезагрузка страницы происходит получить значение/истекшее время UI и показать соответствующее сообщение

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