持久的 jQuery 倒计时答案

【问题标题】：Persistent jQuery Countdown持久的 jQuery 倒计时
【发布时间】：2020-09-10 02:40:30
【问题描述】：

我们正在尝试设置从 5 天开始的倒计时。我们设法使用下面的代码使其工作。但是，当您重新加载页面时，它会刷新到 5 天。我想知道我们如何才能使它在您刷新或重新加载页面时不会重置为 5 天。我对 Javascript 的经验非常少，我不知道下一步该做什么。

<html>
<body>
<span id="countdown" class="timer">7200</span>
<script type="text/javascript">

var first_time = true;
var countdownTimer;
var seconds = document.getElementById('countdown').innerHTML * 60;
//alert(seconds);
if(!isNaN(seconds) && seconds > 0 ) {

    function timer() {

        if(first_time) {
            countdownTimer = setInterval('timer()', 1000);
            first_time = false;
        }

        var days        = Math.floor(seconds/24/60/60);
        var hoursLeft   = Math.floor((seconds) - (days*86400));
        var hours       = Math.floor(hoursLeft/3600);
        var minutesLeft = Math.floor((hoursLeft) - (hours*3600));
        var minutes     = Math.floor(minutesLeft/60);
        var remainingSeconds = seconds % 60;
        if (remainingSeconds < 10) {
            remainingSeconds = "0" + remainingSeconds; 
        }
        document.getElementById('countdown').innerHTML = (days < 10 ? "0" : "") + days + ":" + (hours < 10 ? "0" : "") + hours + ":" + (minutes < 10 ? "0" : "") + minutes + ":" + (remainingSeconds < 10 ? "0" : "") + remainingSeconds;
        if (seconds == 0) {
            clearInterval(countdownTimer);
            document.getElementById('countdown').innerHTML = "Completed";
        } else {
            seconds--;
        }
    }

    timer()

    //var countdownTimer = setInterval('timer()', 1000);
}
</script>
</body>
</html>

【问题讨论】：

欢迎来到 SO @user2753460！希望你喜欢这里。您是否考虑过：1. Cookie，或 2. 本地存储？
谢谢。 @彼得卡。我正在研究 cookie，但我不知道它是如何解决的。

标签： jquery jquery-plugins countdown

【解决方案1】：

检查网络存储支持并使用它来存储您的计数器；如果不支持将计数器存储在 cookie 中：

if (typeof(Storage) !== "undefined") {
    // You can use localStorate to store the seconds
    localStorage.setItem("seconds", secs);
} else {
    // Sorry! No Web Storage support.. use cookie
}

但是，在页面加载时运行的代码的开头，读取计数器并从您离开的地方继续：

var seconds;
if (typeof(Storage) !== "undefined" && localStorage.seconds) {
    seconds = localStorage.getItem("seconds");
} else if (typeof(Storage) === "undefined") {
    //read cookie (if using cookie)
} else {
    seconds = document.getElementById('countdown').innerHTML * 60;
}

Fiddle Demo

【讨论】：