页面刷新后如何停止计时器重置

时间:2019-10-19 12:47:47

标签: javascript html time hide counter

我正在为学术目的创建几页,并且我想将“下一步”按钮隐藏一段时间。问题在于,一旦刷新页面,计时器就会重新开始。我希望它在刷新页面后继续,并且我想改进已经编写的代码,而不是看到新的解决方案。

<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背后的想法,但是我到底需要在哪里插入它?我正在尝试将其插入“变量计数器”旁边,但它并没有执行我想要的操作。

2 个答案:

答案 0 :(得分:0)

您需要localStoragecookies来存储数据并即使在页面重新加载后也可以使用。

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/

答案 1 :(得分:0)

Javascript是客户端的。它将在重新加载或其他任何事情上重置

一个简单的解决方案可能是HTML5 storagesession storage

示例:

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

HTML Web存储提供了两个用于在客户端上存储数据的对象:

  1. window.localStorage-存储没有到期日期的数据
  2. window.sessionStorage-存储一个会话的数据(关闭浏览器选项卡后数据会丢失)

本地存储对象

localStorage对象存储没有到期日期的数据。当浏览器关闭时,数据不会被删除,并且在第二天,每周或每年都可用。

有关LocalStorage Here

的更多文档