重新加载网站时如何防止倒计时重置？

Question

我下载了一个网站模板，一切似乎都正常。我唯一的问题是我的计时器在重新加载页面时总是会重新启动。我能做些什么来防止它？我看到了一些关于节省存储时间的东西，但我的编码知识非常少。提前感谢您的帮助。

（我不想更改布局和 css，所以我只上传了 main.js 计时器部分和我的 html 文件中的特定位置。我的问题仍然有太多代码，所以我需要添加更多细节。我'我只是写一些额外的东西请忽略）。

const countDownClock = (number = 100, format = 'seconds') => {

    const d = document;
    const daysElement = d.querySelector('.days');
    const hoursElement = d.querySelector('.hours');
    const minutesElement = d.querySelector('.minutes');
    const secondsElement = d.querySelector('.seconds');
    let countdown;
    convertFormat(format);


    function convertFormat(format) {
        switch (format) {
            case 'seconds':
                return timer(number);
            case 'minutes':
                return timer(number * 60);
            case 'hours':
                return timer(number * 60 * 60);
            case 'days':
                return timer(number  * 60 * 60 * 24);
        }
    }

    function timer(seconds) {
        const now = Date.now(`November 17 00:00:00`);
        const then = now + seconds * 1000;

        countdown = setInterval(() => {
            const secondsLeft = Math.round((then - Date.now()) / 1000);

            if (secondsLeft <= 0) {
                setInterval(countdown);
                return;
            };

            displayTimeLeft(secondsLeft);

        }, 1000);
    }

    function displayTimeLeft(seconds) {
        daysElement.textContent = Math.floor(seconds / 86400);
        hoursElement.textContent = Math.floor((seconds % 86400) / 3600);
        minutesElement.textContent = Math.floor((seconds % 86400) % 3600 / 60);
        secondsElement.textContent = seconds % 60 < 10 ? `0${seconds % 60}` : seconds % 60;
    }
}


/*
    start countdown
    enter number and format
    days, hours, minutes or seconds
*/
countDownClock(15, 'days');

<div id="countdown" class="countdown">
                                <ul id="countdown-example">
                                    <li>
                                        <span class="days"></span>
                                        <p class="days_text">DAYS</p>
                                    </li>
                                    <li>
                                        <span class="hours"></span>
                                        <p class="hours_text">HOURS</p>
                                    </li>
                                    <li>
                                        <span class="minutes"></span>
                                        <p class="minutes_text">MINS</p>
                                    </li>
                                    <li>
                                        <span class="seconds"></span>
                                        <p class="seconds_text">SECS</p>
                                    </li>
                                </ul>
                            </div>

Answer 1

1. 在加载网页时，从本地存储中检索倒数计时器，正如评论已经指出的那样，并将其作为您的起始值。确保检查是否实际设置了本地存储，并设置一个初始值，以防他们第一次访问的不是 IE。

2. 确保您的 setInterval 函数在每次执行该函数时都使用新计时器更新本地存储。您可以将其存储为时间戳。

Answer 2

欢迎使用 stackoverflow SXNSITVTY。

要实现您想要的，您需要将当前值存储到localstorage。

然后，您可以在代码中使用存储的值。我认为，在查看您的代码时，实现应该在这里

        const now = Date.now(`November 17 00:00:00`);
        const then = now + seconds * 1000;

        countdown = setInterval(() => {
            let secondsLeft = Math.round((then - Date.now()) / 1000);
            const storedSecondsLeft = localStorage.getItem('secondsLeft');
            // check if you have localstorage stored
            // then override the value of secondsLeft with the localstorage
            if (storedSecondsLeft) {
               secondsLeft = +storedSecondsLeft
            }

            if (secondsLeft <= 0) {
                clearInterval(countdown);
                return;
            };

            // implement localstorage here
            localStorage.setItem('secondsLeft', secondsLeft)
            displayTimeLeft(secondsLeft);

        }, 1000);
    }

希望你理解这个想法

Answer 3

所以经过数小时的尝试后，我成功地实现了它，它需要的是（-1）在 secondsLeft 之后的正确位置。 不知何故，在尝试了一个洞之夜之后，我觉得我尝试了很多可能性。 7个多小时后，我真的开始理解代码了。大声笑我正在查看代码，并且能够思考整个过程......所以计时器在 localstorage 中以 secondsLeft 的形式保存，但没有 (-1) secondsLeft 不会改变。 当（-1）被设置时。返回函数重新开始，但从点（1）已经被减去，依此类推，依此类推。如果你落后于它那么简单，但它很难以某种方式理解。很高兴我完成了那段旅程。

 const now = Date.now(`November 17 00:00:00`);
        const then = now + seconds * 1000;

        countdown = setInterval(() => {
            let secondsLeft = Math.round((then - Date.now()) / 1000);
            const storedSecondsLeft = localStorage.getItem('secondsLeft');
            // check if you have localstorage stored
            // then override the value of secondsLeft with the localstorage
            if (storedSecondsLeft) {
               secondsLeft = +storedSecondsLeft
            }

            if (secondsLeft <= 0) {
                clearInterval(countdown);
                return;
            };

            // implement localstorage here
            localStorage.setItem('secondsLeft', secondsLeft-1)// use -1 to update seconds Left 
            displayTimeLeft(secondsLeft);

        }, 1000);
    }