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

Question

У меня есть таймер, который не должен обнулятся при обновлении страницы. Сделать я хочу через сессию, но с js'ом я не дружу и не понимаю, как это мне сделать по-человечески. Важно, чтобы это все проходило через сессии, чтобы потом я мог ее обнулить, после отправки формы. Таймер:

<div class="quiz-timer">
   Времени прошло:<h1 id="timer">00:00:00</h1>
</div>
<script>
    var h1 = document.getElementById('timer');
    var sec = 0;
    var min = 0;
    var hrs = 0;
    var t;
                    
    function tick(){
        sec++;
        if (sec >= 60) {
            sec = 0;
            min++;
            if (min >= 60) {
                min = 0;
                hrs++;
            }
        }
    }
    function add() {
        tick();
        h1.textContent = (hrs > 9 ? hrs : "0" + hrs) 
                 + ":" + (min > 9 ? min : "0" + min)
                 + ":" + (sec > 9 ? sec : "0" + sec);
        timer();
    }
    function timer() {
        t = setTimeout(add, 1000);
    }
    
    timer();
</script>

Answer 1

<div class="quiz-timer">
   Времени прошло:<h1 id="timer">00:00:00</h1>
</div>
<script>
    var h1 = document.getElementById('timer');
    var sec = sessionStorage.getItem('sec') || 0; // загрузка значения секунд из сессии или установка значения 0, если значение в сессии отсутствует
    var min = sessionStorage.getItem('min') || 0; // загрузка значения минут из сессии или установка значения 0, если значение в сессии отсутствует
    var hrs = sessionStorage.getItem('hrs') || 0; // загрузка значения часов из сессии или установка значения 0, если значение в сессии отсутствует
    var t;
                    
    function tick(){
        sec++;
        if (sec >= 60) {
            sec = 0;
            min++;
            if (min >= 60) {
                min = 0;
                hrs++;
            }
        }
        // сохранение значений времени в сессии
        sessionStorage.setItem('sec', sec);
        sessionStorage.setItem('min', min);
        sessionStorage.setItem('hrs', hrs);
    }
    function add() {
        tick();
        h1.textContent = (hrs > 9 ? hrs : "0" + hrs) 
                 + ":" + (min > 9 ? min : "0" + min)
                 + ":" + (sec > 9 ? sec : "0" + sec);
        timer();
    }
    function timer() {
        t = setTimeout(add, 1000);
    }
    
    timer();
</script>

Функция для обнуления таймера

function resetTimer() {
  // обнуление значений времени в сессии
  sessionStorage.setItem('sec', 0);
  sessionStorage.setItem('min', 0);
  sessionStorage.setItem('hrs', 0);

  // обнуление значений времени на странице
  h1.textContent = "00:00:00";

  // остановка таймера
  clearTimeout(t);
}

БЛОГ НА HUSL

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

Ответы (1 шт):