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

Question

我正在创建一些用于学术目的的页面，我想将 "Next" 按钮隐藏几秒钟。问题是，一旦页面刷新，计时器就会重新开始。我希望它在页面刷新后继续，我想改进已经编写的代码而不是看到一个新的解决方案。

<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" 旁边，但它没有按照我的要求执行。

Answer 1

您需要 localStorage 或 cookies 来存储数据并在页面重新加载后使用。

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

更新

更新问题后，这里是您需要如何从 localStorage

存储和获取 counter 变量

当您声明计数器变量时：

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

您可以使用 javascript onbeforeunload 事件检测页面 reload/refresh 并同时存储计数器值以供下次使用。

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

UPDATE-2

这是您可以使用的有效 fiddle：

https://jsfiddle.net/wdar3yuq/

Answer 2

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

您的问题的简单解决方案可能是 HTML5 storage 或 session storage

示例：

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

HTML web storage 提供了两个对象用于在客户端存储数据：

window.localStorage - 存储没有有效期的数据
window.sessionStorage - 存储一个会话的数据（浏览器选项卡关闭时数据丢失）

本地存储对象

localStorage 对象存储没有过期日期的数据。数据不会在浏览器关闭时被删除，并在次日、次周或次年可用。

关于 LocalStorage 的更多文档Here

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

How do I stop timer reset after page refresh

html

javascript

time

counter

hide