頁面刷新后如何停止計時器重置

Question

我正在為學術目的創建幾個頁面，我想將“下一步”按鈕隱藏幾秒鍾。 問題是一旦頁面被刷新，計時器就會重新開始。 我希望它在頁面刷新后繼續，並且我想改進已經編寫的代碼而不是查看新的解決方案。

<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事件檢測頁面重新加載/刷新，同時存儲計數器值以供下次使用。

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

更新-2

這是您可以使用的工作小提琴：

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 存儲提供了兩個對象用於在客戶端存儲數據：

1. window.localStorage - 存儲沒有過期日期的數據
2. window.sessionStorage - 存儲一個 session 的數據（關閉瀏覽器選項卡時數據丟失）

本地存儲 Object

localStorage object 存儲沒有過期日期的數據。 關閉瀏覽器時數據不會被刪除，將在下一天、下周或下一年可用。

更多關於 LocalStorage 的文檔在這里