У меня есть таймер javascript, но я хочу, чтобы таймер продолжался, даже если я обновлю sh или перезапущу браузер

Question

Я использую таймер обратного отсчета, который я нашел в Google, я просто изменяю некоторую строку кодов, чтобы таймер считал вместо обратного отсчета. Я просто хочу, чтобы мой таймер отсчитал время, после чего он останавливается, когда я нажимаю кнопку остановки. Моя проблема в том, что я хочу, чтобы таймер не сбрасывался, даже если страница обновляется sh или браузер перезагружается. Из того, что я знаю, мне нужно использовать куки для этого, но я не знаю, как включить его в мой код. Пожалуйста, помогите ..

Вот мой код.

(function() {
  $(document).ready(function() {
    var time = "00:00:00",
      parts = time.split(':'),
      hours = +parts[0],
      minutes = +parts[1],
      seconds = +parts[2],
      span = $('#countup');

    function correctNum(num) {
      return (num < 10) ? ("0" + num) : num;
    }

    var timer = setInterval(function() {
      seconds++;
      if (seconds > 59) {
        minutes++;
        seconds = 0;

        if (minutes > 59) {
          hours++;
          seconds = 0;
          minutes = 0;

          if (hours >= 24) {
            alert("timer finished");
          }
        }
      }
      span.text(correctNum(hours) + ":" + correctNum(minutes) + ":" + correctNum(seconds));
    }, 1000);
  });
})()

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span id="countup">00:00:00</span>

Answer 1

Вы можете использовать, например, localalstorage, чтобы сохранить таймер, а затем просто использовать его. Пожалуйста, попробуйте следующий пример:

// Set an item to localstorage
localStorage.setItem('name', 'value');

// Read the item from localstorage
localStorage.getItem('name'); => // => 'value'

В вашем коде это должно выглядеть так:

(function(){
  $(document).ready(function() {

    var time = localStorage.getItem('timer') || "00:00:00",
        parts = time.split(':'),
        hours = +parts[0],
        minutes = +parts[1],
        seconds = +parts[2],
        span = $('#countup');

    function correctNum(num) {
        return (num<10)? ("0"+num):num;
    }

    var timer = setInterval(function(){
        seconds++;
        if(seconds > 59) {
            minutes++;
            seconds = 0;

            if(minutes > 59) {
                hours++;
                seconds = 0;
                minutes = 0;

                if(hours >= 24) {
                  alert("timer finished");
                }
            }
        }

        var displayTime = correctNum(hours) + ":" + correctNum(minutes) + ":" + correctNum(seconds);
        localStorage.setItem('timer', displayTime);
        span.text(displayTime);
    }, 1000); 
  }); 
})()

Answer 2

Лучший способ сохранить обратный отсчет - это, вероятно, сохранить окончание обратного отсчета как фиксированный момент времени (например, отметку времени UNIX, для которой JavaScript имеет поддержку), а затем пересчитать разницу между местное время и сэкономленное время при загрузке страницы. На самом деле есть такие удобные библиотеки, которые помогают с временными операциями, такие как Момент. js.

Я бы порекомендовал использовать LocalStorage поверх куки, куки также отправляются на сервер и предназначены больше для аутентификации / сессионные токены. Вот хорошая статья для начала:

https://www.taniarascia.com/how-to-use-local-storage-with-javascript/

Answer 3

Рабочий скрипт, использующий 24 секунды вместо 24 часов - он сбрасывается после завершения таймера, поэтому при следующем обновлении страницы он начинается с 0

Раскомментируйте строки, чтобы они работали скрипт.

ПРИМЕЧАНИЕ изменить

var savedDate = "", // +localStorage.getItem("date"),

на

var savedDate = +localStorage.getItem("date"),

const pad = (num) => ("0" + num).slice(-2);

$(function() {
  var savedDate = "", // +localStorage.getItem("date"),
    date = new Date();
  if (savedDate && !isNaN(savedDate)) date = new Date(savedDate);
  else date.setHours(0, 0, 0, 0);


  var hours = date.getHours(),
    minutes = date.getMinutes(),
    seconds = date.getSeconds(),
    $span = $('#countup');

  var timer = setInterval(function() {
    date.setSeconds(date.getSeconds() + 1);
    if (date.getHours() >= 24) {
      clearInterval(timer);
      $span.text("timer finished");
      // localStorage.removeItem("date");
    } else {
      $span.text(
        pad(date.getHours()) + ":" +
        pad(date.getMinutes()) + ":" +
        pad(date.getSeconds())
      );
      // localStorage.setItem("date", date.getTime())
    }
  }, 1000);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span id="countup"></span>

Answer 4

Я думаю, вы должны использовать localalstorage для времени магазина. лучше хранить время на странице разгрузки события