Таймер обратного отсчета Javascrip: предотвратить перезагрузку при перезагрузке страницы

Question

У меня есть минутный таймер, который отсчитывает от 15 до 0. Я не хочу сбрасывать (= перезапускать) таймер при перезагрузке страницы. но я не могу понять, как предотвратить сброс таймера при перезагрузке страницы. Я использую javascript с php. Я пытался добавить время таймера при загрузке к сеансу php, но у меня это не сработало. какие-либо предложения? спасибо :) 1001

function startTimer() {
    setTimeout('timer()', 60);
}

  var continueMins = localStorage.getItem("continueMins");
  var continueSecs = localStorage.getItem("continueSecs");
  
  if (continueMins == 'true') {
    mins = continueMins;
  } else {
    mins = 15;
  }

  if (continueSecs == 'true') {
    secs = continueSecs;
  } else {
    secs = mins * 60;
  }

  function timer() {
    if (document.getElementById) {
        minutes = document.getElementById("minutes");
        seconds = document.getElementById("seconds");
        progressBar = document.getElementById("progressBar");
        timerContainer = document.getElementById("timer-container");
        expired = document.getElementById("expired");
        btcAmount = document.getElementById("btcAmount");
        btcAddress = document.getElementById("btcAddress");

        window.onbeforeunload = function() {
            localStorage.setItem("continueMins", getMinutes());
            localStorage.setItem("continueSecs", getSeconds());
        }

        var totalSeconds = 15 * 60, remainingSeconds = getMinutes() * 60 + getSeconds();

        progressBar.style.width = (remainingSeconds * 100 / totalSeconds) + "%";

        minutes.innerHTML = getMinutes() < 10 ? "0" + getMinutes() : getMinutes();
        seconds.innerHTML = getSeconds() < 10 ? "0" + getSeconds() : getSeconds();

        if (mins < 1) { 
            minutes.classList.add("text-danger");
            seconds.classList.add("text-danger");
        }

        if (mins < 0) {
            expired.style.display = 'block';
            timerContainer.style.display = 'none';
            btcAmount.text = 'Expired';
            btcAddress.text = 'Payment Window Expired';
            localStorage.removeItem("continueMins");
            localStorage.removeItem("continueSecs");
        } else {
            secs--;
            setTimeout('timer()', 1000);
        }

    }
}

function getMinutes() {
    mins = Math.floor(secs / 60);
    return mins;
}

function getSeconds() {
    return secs - Math.round(mins * 60);
}

startTimer();

<p class="font-18 font-500"><span id="minutes"></span> : <span id="seconds"></span></p>

Answer 1

Вы можете использовать localStorage (sessionStorage также является опцией, но более склонна перезапускать таймер, если пользователь, например, повторно подключается в новой вкладке или перезапускает браузер)
Как это сделать, чтобы быть на стороне сохранения (вылетает Неожиданное поведение должно время от времени обновлять истекшее время в вашем локальном хранилище. "Нормальные" ситуации обрабатываются путем проверки соответствующего события:

var aTimer, bool;
window.onbeforeunload = function (e) {
    if (bool) return;
    aTimer = setTimeout(function () {
       bool = true;
    localStorage.setItem("resetTimer", "false");      
    localStorage.setItem("currentTimer", MY_TIMER_VAR);
    localStorage.setItem("sessionDate", MY_NEW_SESSION_VAR);
 }, 500);
 return ; 
};

РЕДАКТИРОВАТЬ Если вы хотите, чтобы истекший таймер действителен, скажем, 24 часа, вы также должны разместить MY_NEW_SESSION_VAR, который является Date.now (), преобразованным в часах, при перезагрузке вы проверяете TODAY_DATETIME_IN_HOURS, который является Date.now (), конвертированным в часы (это был мой используйте случай, если он вам не нужен, просто не указывайте его)

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

 var resetTimer = localStorage.getItem("resetTimer");
 var sessionDate = localStorage.getItem("sessionDate");  
 if (resetTimer == "true" || sessionDate > (TODAY_DATETIME_IN_HOURS - 24) ){ // start timer }

Для удаления например, один элемент

 localStorage.removeItem("sessionDate");

Если вы хотите использовать sessionStorage, просто замените localStorage на sessionStorage
EDIT полный код для протестированного OP и работающий в соответствии с запросом

var countDownTarget;

if (document.readyState!="loading") docReady();
/* Modern browsers */
else document.addEventListener("DOMContentLoaded", docReady);
function docReady() {
  countDownTarget = parseInt(localStorage.getItem("countDownTarget"));
 console.debug("Initvalue: " + countDownTarget);
 if (isNaN(countDownTarget) == true || countDownTarget == "" || countDownTarget <= 0){  // If not defined
    countDownTarget = new Date().getTime() + 15 * 60 * 1000;
    console.debug("is NaN sInitvalue: " + countDownTarget);
  //Update the count down every 1 second
   setInterval(countDown, 1000);
    } else {
    console.debug("else Initvalue: " + countDownTarget);
    setInterval(countDown, 1000);
    }
}

window.onbeforeunload = function() {
    localStorage.setItem("countDownTarget", countDownTarget);
};

// Functions you call
function countDown(){
    var now = new Date().getTime();  
    //console.debug("now " + now);  
    var distance = countDownTarget - now;
    console.debug("distance " + distance);
    var mins = distance < 0 ? 0 : Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
    var secs = distance < 0 ? 0 : Math.floor((distance % (1000 * 60)) / 1000);        
/** Add a zero in front of numbers<10 */
    mins = prependZero(mins);
    secs = prependZero(secs);
 // Output the results
    document.getElementById("minutes").innerHTML = mins;
    document.getElementById("seconds").innerHTML = secs;

    if (distance <= 0) {
 //   clearInterval(x);
    localStorage.removeItem("countDownTarget");
    clearInterval(countDown); 
    }

}

function prependZero(i){
    if (i < 10) {
        i = "0" + i;
    }
    return i;
}

Копирование между тегами скрипта или загрузка в виде *. js file