Как сделать чтобы таймер при обновлении страницы не сбрасывался?

Question

[Mark]

Здравствуйте!
Как сделать чтобы таймер при обновлении страницы не сбрасывался?
Таймер: jsfiddle.net/pud60tbf/10

Comments

[Модератор]

Mark дорогой пользователь, настоятельно рекомендуем еще раз обратить самое пристальное внимание на п. 3.1 регламента работы сервиса (и, в особенности, на его последний абзац). В противном случае, ваши вопросы будут удаляться по причине тег-спама, а систематические нарушения приведут к блокировке учетной записи.

Answer 1

[Сергей Соколов]

Таймер надо переделать, чтобы он не просто уменьшал счётчик раз в секунду, а вместо этого показывал число секунд до времени «Ч».

В момент запуска таймера можно расчитать время, когда он закончится: сейчас + N секунд. Это время надо сохранить в localStorage:

window.localStorage.setItem('timerEnd', endDate.getTime())

При загрузке страницы смотреть, есть ли в localStorage под этим ключом какое-нибудь значение, и если есть и оно в будущем, использовать его:

var finish = parseInt( window.localStorage.getItem('timerEnd'));
if(finish  &&  finish > (new Date()).getTime()) { // есть таймер, который надо возобновить
  
}

Примерно так

let timer = document.getElementById('timer');
let indicator = document.getElementById('indicator');
let startButton = document.getElementById('startButton');

const lsKey = 'timerEnd';

let savedTime = parseInt(window.localStorage.getItem(lsKey));
if( savedTime) {
  let D = new Date();
  D.setTime(savedTime);
  timerStart(D);
}

startButton.addEventListener('click', function(){
  let D = new Date();
  D.setTime( D.getTime()  + 1000 * timer.value);
  timerStart(D);
});

function timerStart (finishDate) {
  let LS = window.localStorage;
  let D = new Date();
  
  let seconds = Math.round((finishDate - D) / 1000);
  if (seconds <= 0) {
    LS.removeItem(lsKey);
    return;
  }
  
  LS.setItem( lsKey, finishDate.getTime()); // запомнили в LS
  
  indicator.textContent = seconds;
  setIndicator(true);
  let timerId = setInterval(() => {
    let seconds = Math.round((finishDate - new Date()) / 1000);
    indicator.textContent = seconds;
    if (seconds <= 0) {
      LS.removeItem(lsKey);
      clearInterval(timerId);
      setIndicator(false);
    }
  }, 100);
}

function setIndicator(onOff) {
  if(onOff) {
    indicator.className = `green`;
  } else {
    indicator.className = `red`;
  }
}

Фиддл