Продолжение нескольких таймеров (работает в фоновом режиме), даже если страница / браузер закрыта или обновлена

Question

Я новичок в HTML и JavaScript. Я не смог найти никакого решения для предотвращения перезапуска таймеров на странице, когда страница закрылась или обновилась.

Я хочу, чтобы таймер продолжал работать даже после закрытия страницы / браузера.

Например: если таймер отсчитал 1 час, я активировал его и закрыл. Через 30 минут я снова открываю страницу, оставшееся время должно быть 30 минут.

Вот мой код таймера:

function countdown(element, hours, minutes, seconds, oritime) {
  var interval;
  var htemp = 0;
  var mtemp = 0;
  interval = setInterval(function() {
    var el = document.getElementById(element);
    if (seconds == 0) {
      if (minutes == 0) {
        if (hours == 0) {
          clearInterval(interval);
          el.innerHTML = oritime;
          return;
        } else {
          if (htemp == 0) {
            minutes = 0;
            seconds = 0;
            htemp = 1;
          }
        }
      } else {
        if (mtemp == 0) {
          seconds = 0;
          mtemp = 1;
        }
      }
    }
    if (hours > 0) {
      var hour_text = hours > 9 ? '' : '0';
    } else {
      var hour_text = '0';
    }
    if (minutes > 0) {
      var minute_text = minutes > 9 ? '' : '0';
    } else {
      var minute_text = '0';
    }
    var second_text = seconds > 9 ? '' : '0';
    el.innerHTML = hour_text + hours + ' : ' + minute_text + minutes + ' : ' + second_text + seconds;
    if (seconds == 0) {
      if (minutes == 0) {
        if (hours == 0) {
          clearInterval(interval);
          el.innerHTML = oritime;
          return;
        } else {
          if (htemp == 1) {
            hours--;
            minutes = 59;
            seconds = 60;
            htemp = 0;
          }
        }
      } else {
        if (mtemp == 1) {
          minutes--;
          seconds = 60;
          mtemp = 0;
        }
      }
    }
    seconds--;
  }, 1000);
}

<input type="button" onclick="countdown('timer1',0,5,0,'5');" value="Start Timer 1">
<div id='timer1' color='red'>5</div>
<input type="button" onclick="countdown('timer2',0,5,0,'5');" value="Start Timer 2">
<div id='timer2' color='red'>5</div>

Позволит ли использование файлов cookie решить эту проблему? Если так, то как?

Я не использовал PHP, AJAX или jQuery, так как еще не научился этому. У меня нет сервера для публикации HTML-файла, поэтому я просто нашел решение, которое публикуется с помощью Google Drive.

Побочная тема, если есть какой-нибудь "бесплатный" сервер для загрузки людьми HTML, чтобы другие могли получить доступ через Интернет, это было бы здорово.

Answer 1

Краткий ответ нет. Javascript будет работать только тогда, когда ваш браузер открыт и не должен использоваться для сохранения каких-либо данных.

Если вы хотите таймер, вы должны использовать сервер и язык на стороне сервера, как PHP сделать это.

РЕДАКТИРОВАТЬ: Сказав это, я нашел Jquery плагин, который может быть полезен для вас.

Answer 2

Вы должны попытаться немного изменить свой код, например:

if (seconds === 0 && minutes === 0 && hours === 0) {
// your else logic here...
}

Вы также можете использовать switch если вам случится использовать много "вложенных ifs" и логику короткого замыкания.

И да, переходя в мир javascript, вы обнаружите много интересных библиотек и фреймворков (в основном с множеством абстрагированных функций / методов, которые многие умные блестящие люди заранее написали для вас), вы можете Используйте, чтобы помочь вам развивать функции гораздо быстрее!

Поскольку вы сохранили свой элемент только в "переменной", ваш таймер будет работать только до тех пор, пока локальный сеанс активен (то есть все сохраненные переменные будут очищены после закрытия браузера / сеанса).

Если вы хотите больше поиграть с хранилищем данных и фактическими данными персистентности в базе данных, вам следует разрабатывать как минимум в среде "локального хоста", которую вы можете легко настроить с помощью "Nodejs", загрузив по адресу https://nodejs.org/

Надеюсь, это поможет вам на пути разработки кода!