How can i prevent Countdown from reseting when i reload website?

Question

I downloaded a Website Template and everything seems to be working. My only problem is that my timer always starts again when reloading the page. What can i do to prevent it ? i saw something about saving time on a storage but my coding knowledge is very small. thanks for help in advance.

(i don't want to change the layout and css so i only uploaded main.js timer section and the specific spot in my html file. My question still has too much code so i need to add more details. I'm just writing some extra stuff please ignore).

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

To achieve what you want, you need to store your current value to localstorage.

Then, you can use the stored value in your code. I think, when looking your code, the implementation should be here

        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 2

so after hours and hours of trying i managed it, the implemantation was correct what it needed was the (-1) after secondsLeft at the correct spot. somehow, after a hole night of trying out, i feel like i tried so many posssibilitys. i'm really starting to understand code, after more than 7 hours. lol i was looking at the code and was able to think the whole process through... so the timer gets saved in secondsLeft in localstorage, but without the (-1) the secondsLeft wouldn't change. when (-1) is set.the return function starts it over but from the point the (1) was already substracted so on, and so, on. so simple if you get behind it but its hard to understand somehow. glad i made that journey.

 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);
    }

Answer 3

1. On loading the webpage, retrieve the countdown timer from local storage as the comment already points out, and take that as your starting value. Make sure you check wheter local storage is actually set, and setup a initial value in case it's not IE they are visiting the first time.

2. Make sure your setInterval function updates the local storage with the new timer each time the function performed. You can store it as a timestamp.