Jquery Countdown Timer без сброса на странице обновления?

Question

У меня есть код, который работает безупречно. При нажатии кнопки таймер отсчитывает до тех пор, пока он не будет снова нажат.

Проблема: Когда страница обновляется, она будет сброшена, и им придется щелкнуть ее снова, прежде чем снова произойдет отсчет.

Цель: Таймер, чтобы начать работу в любое время.

Мое приложение - PHP и MySQL, если это будет работать лучше всего, но вот код, с которым я работаю.

Кто-нибудь знает, как я получу функциональность, которую я ищу?

JS

$('.trigger').on('click', function(e) { 
    $(this).html('show') 
    $('.show').slideUp('medium'); 
    var count = 10, 
     counter = setInterval(timer, 1000); 

    function timer() { 
     count--; 
     if (count <= 0) { 
      clearInterval(counter); 
      $('.trigger').html('hide'); 
      $('.show').slideDown('medium'); 
      return; 
     } 
     console.log(count); 
     $('.timer').html(count); 
    } 
}); 

Answer 1

Для достижения своей цели существуют два метода:

Печенье или DataStorage: Этот метод хорош, если вы можете доверять своим клиентам.

Cookies

JavaScript Storage

StackOverflow Example

хранения базы данных: Вы можете сделать AJAX вызов вашей серверной и сохранить пользователей нажмите кнопку. Проблема с этим методом заключается в том, что когда-либо вам нужно повторно отправить в базу данных.

jQuery.ajax

Причина вы видите, что вы видите:

поток

Процесс выглядит следующим образом:

Server Side код -> отправляет данные клиента -> Браузер начинает рендеринг и исполнение JS

Вы находитесь на последнем шаге, так как сеть не имеет гражданства, вы не храните инфу ormation в интерфейсе клиента JavaScript. Для этого вам нужно будет сделать одно из приведенных выше.

Используя приведенную выше информацию ниже, представляет собой пример специально для вас:

DEMO:jsFiddle

JS

function createCookie(name, value, days) { 
    if (days) { 
     var date = new Date(); 
     date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000)); 
     var expires = "; expires=" + date.toGMTString(); 
    } else var expires = ""; 
    document.cookie = name + "=" + value + expires + "; path=/"; 
} 

function readCookie(name) { 
    var nameEQ = name + "="; 
    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, c.length); 
     if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length); 
    } 
    return null; 
} 

function eraseCookie(name) { 
    createCookie(name, "", -1); 
} 

$('.trigger').on('click', function (e) { 
    $(this).html('show') 
    $('.show').slideUp('medium'); 
    var count = 10; 
    if (readCookie("timer") != undefined) count = readCookie("timer"); 

    var counter = setInterval(timer, 1000); 

    function timer() { 
     createCookie("timer", count, 365); 
     count--; 
     if (count <= 0) { 
      clearInterval(counter); 
      $('.trigger').html('hide'); 
      $('.show').slideDown('medium'); 
      eraseCookie("timer"); 
      return; 
     } 
     console.log(count); 
     console.log(readCookie("timer")); 
     $('.timer').html(count); 
    } 
}); 

Answer 2

Проблема заключается в том, что Javascript не сохраняется состояние. Он начинается с 0 при каждой загрузке страницы.

Для функциональности вам нужно, вы должны сохранить печенье на кнопку мыши на таймер СТОП и прочитать на странице загрузки, чтобы увидеть, если это имеет значение, сохраненное или нет, то начните со второго 0.

Престола: http://www.quirksmode.org/js/cookies.html