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

【问题标题】：How do I stop timer reset after page refresh页面刷新后如何停止计时器重置
【发布时间】：2019-10-19 12:47:47
【问题描述】：

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

<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”旁边，但它没有做我想要的。

【问题讨论】：

标签： javascript html time hide counter

【解决方案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 事件检测页面重新加载/刷新，同时存储计数器值以供下次使用。

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

UPDATE-2

这是一个你可以使用的工作小提琴：

https://jsfiddle.net/wdar3yuq/

【讨论】：

感谢您的帮助，但我无法做到。我改变了“var counter = 5;”到 "var 计数器 = localStorage.getItem("counter");"并在“counter = counter ? counter : 5;”下方添加了一行。在 newElement.innerHTML 中，我添加了 localStorage.setItem("counter", counter): 而不是“counter”，在函数和变量设置位置。最后，我写的是“window.onbeforeunload.interval = setInterval(function()...”而不是“interval = setInterval(function()...”。不确定这是否正是你所建议的，因为我不知道完全懂编程。
@viiivi 你可以创建一个小提琴或 plunker 吗？然后我们可以通过更改深入了解您的真实代码。
什么是“window.onbeforeunload.interval”？？你只需要我给出的相同语法。事件是一个单独的实体，不需要与间隔混合。
嘿，很抱歉给您带来了困惑。这些是我所做的更改：jsfiddle.net/1e4y0936
@viiivi 没问题，我已经用一个工作小提琴更新了我的答案。小提琴中的更改 (1) 更正了 counter 变量的用法 (2) 更正了错误的方法 window.onbeforeunload.interval (3) 修改了存储密钥名称以避免与您的浏览器冲突（即拥有先前的存储密钥） (4) 添加 removestorage 时计数器达到 0。

【解决方案2】：

Javascript 是客户端的。它会在 reload 或任何其他操作时重置。

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

例子：

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

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

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

本地存储对象

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

更多关于 LocalStorage 的文档Here

【讨论】：

我明白了整个想法，但我不知道应该在我的代码中添加 localStorage 的确切位置。尝试在任何地方添加它，它会导致计时器完全停止或在刷新后重置。