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

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. 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.