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>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

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.

CodePudding user response：

Welcome to stackoverflow SXNSITVTY.

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

Hope you understand the idea