Create a timer which resets itself after 24 hours but doesn't get restarted after the page is r-CodePudding

i'm creating a web app and i'm trying to create a countdown timer for a certain product that is on discount and i'm wondering if there is a way to not reset the timer after the page has been refreshed and when it reaches 0 , wait 24 hours and then reset itself automatically. Here is a picture of a timer down below:

Here is the code of a timer:

var count = 420;
    var counter = setInterval(timer, 1000);

    function timer() {
        count = count - 1;
        if (count == -1) {
            clearInterval(counter);
            return;
        }

        var seconds = count % 60;
        var minutes = Math.floor(count / 60);
        minutes %= 60;

        document.getElementById("timer").innerHTML = (minutes).toLocaleString('en-US', {minimumIntegerDigits: 2, useGrouping:false})   ":"   (seconds).toLocaleString('en-US', {minimumIntegerDigits: 2, useGrouping:false}); // watch for spelling
        document.getElementById("timer2").innerHTML = (minutes).toLocaleString('en-US', {minimumIntegerDigits: 2, useGrouping:false})   ":"   (seconds).toLocaleString('en-US', {minimumIntegerDigits: 2, useGrouping:false}); // watch for spelling

    }

CodePudding user response：

It's not a great option, but when the user first lands on the page, create a timer with a new count down and store the counter value in the local storage, and update it every second in the storage as well. And the next time the user comes, you can check if you already have the counter in the storage, use that value of the counter to create the timer. Here's some documentation on using localStorage - https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

CodePudding user response：

You can use localStorage to persist a value across page loads. When talking about a timer, it makes sense to save the time at which the timer was started. That way when a visitor comes back your code can tell exactly how much time is left on it.

// Get the time stamp (in milliseconds) that the timer started 
var timerStart = window.localStorage.getItem('timerStart')
if (!timerStart){
    // If a timer was never started, start one
    timerStart = new Date().getTime()
    window.localStorage.setItem('timerStart', timerStart)
}

// Update the timer every 1/10th of a second
setInterval(timer, 100);

function timer() {
    // Use the start time to computer the number of
    // seconds left on the timer
    var count = 7 * 60 - Math.round((new Date().getTime() - timerStart) / 1000)
    if (count < 0) {
        clearInterval(timer);
        return;
    }

    var seconds = count % 60;
    var minutes = Math.floor(count / 60);
    minutes %= 60;

    document.getElementById("timer").innerHTML = (minutes).toLocaleString('en-US', {minimumIntegerDigits: 2, useGrouping:false})   ":"   (seconds).toLocaleString('en-US', {minimumIntegerDigits: 2, useGrouping:false}); 
}