Как остановить сброс таймера после обновления страницы - PullRequest
Новая
       52

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

0 голосов
/ 19 октября 2019

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

<strong>
    <input class="btn btn-primary btn-large btn-primary next-button" type="submit" value="Next"/>
    <script>
        var showButton = document.getElementsByClassName("btn btn-primary btn-large btn-primary next-button")[0];
        var counter = 5;
        var newElement = document.createElement("p");
        newElement.innerHTML = "You can proceed to the subsequent page in " + counter + " seconds.";
        var interval;
        showButton.parentNode.replaceChild(newElement, showButton);
        interval = setInterval(function() {
            counter--;
            if(counter < 0) {
                newElement.parentNode.replaceChild(showButton, newElement);
                clearInterval(interval);
            } else {
                newElement.innerHTML = "You can proceed to the subsequent page in " + counter.toString() + " seconds.";
            }
        }, 1000);
    </script>
</strong>

Я понимаю идею, стоящую за localStorage, но где именно я могу это сделать? нужно вставить это? Я пытаюсь вставить его рядом с "var counter", но он не выполняет то, что я хочу.

Ответы [ 2 ]

0 голосов
/ 19 октября 2019

Javascript на стороне клиента. сброс при перезагрузке или любой другой вещи.

Простым решением вашей проблемы может быть HTML5 storage или session storage

Пример: 

// Store
localStorage.setItem("lastname", "Smith");
// Retrieve
document.getElementById("result").innerHTML = localStorage.getItem("lastname");

Веб-хранилище HTML предоставляет два объекта для хранения данных на клиенте:

  1. window.localStorage - хранит данные без даты истечения срока действия
  2. window.sessionStorage - сохраняет данные за один сеанс (данные теряются при закрытии вкладки браузера)

Объект localStorage

Объект localStorage хранит данныебез срока годности. Данные не будут удалены при закрытии браузера и будут доступны на следующий день, неделю или год.

Дополнительная документация о LocalStorage Здесь

0 голосов
/ 19 октября 2019

Вам необходимо localStorage или cookies для хранения данных и использования даже после перезагрузки страницы.

https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

ОБНОВЛЕНИЕ

После обновленного вопроса, вот как вам нужно сохранить и получить переменную counter из localStorage

, когда вы объявили переменную счетчика: 

var counter = localStorage.getItem("counter");
counter = counter ? counter : 5 ;  // if in store then that value otherwise 5 as default

Вы можете обнаружить перезагрузку / обновление страницы, используяjavascript onbeforeunload событие и то же самое время сохраняют значение счетчика для следующего использования. 

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

UPDATE-2

Вот рабочая скрипка, которую вы можете использовать:

https://jsfiddle.net/wdar3yuq/

...