Countdown 1 hour using localstorage JavaScript not working as intended-CodePudding

I'm trying to make an countdown timer set to 1 hour , when the hour is done , the timer should redirect people to a specific page.

My current code is not working as intended since its not storing in localstorage the countdown after a refresh of the page.

<div id='stored'></div>

<script>


function countdown(minutes, seconds )
{
    var endTime, hours, mins, msLeft, time;

    function twoDigits( n )
    {
        return (n <= 9 ? '0'   n : n);
    }

    function updateTimer()
    {
        msLeft = endTime - ( new Date);
        if ( msLeft < 1000 ) {
          window.location.replace('done');
        } else {
            time = new Date( msLeft );
            hours = time.getUTCHours();
            mins = time.getUTCMinutes();
            localStorage.setItem('timelol', (hours ? hours   ':'   twoDigits( mins ) : mins)   ':'   twoDigits( time.getUTCSeconds() ));
            document.getElementById('stored').innerHTML = localStorage.getItem('timelol');
            setTimeout( updateTimer, time.getUTCMilliseconds()   500 );
        }
    }


    endTime = ( new Date)   1000 * (60*minutes   seconds)   500;
    updateTimer();
}
countdown( 60,0 );

CodePudding user response：

// checks if expirationTime is present on initial and subsequent page loads

if (!localStorage.getItem("exp")) {
  const expirationTimeInHours = 1;

  const expirationTime = Date.now()   expirationTimeInHours * 60 * 60 * 1000; 
  // expirationTime = current time in millsec   1hr in millsec
  console.log("expirationTime", expirationTime);

  localStorage.setItem("exp", expirationTime);
}

// Execute checkExpiration() function on page Load
const checkExpiration = setInterval(() => {
  const currentTime = Date.now();
  const expireAt = localStorage.getItem('exp');
  console.log('current', currentTime);
  if (currentTime >= expireAt) {
    //do some action
    console.log("expired");
    clearInterval(checkExpiration);
  }
}, 5000); // every 5sec - change as per your need

CodePudding user response：

I made a few changes, but it's similar, hope it works for you.

<div id='stored'></div>
<div id='started'></div>


<script>

let startTime = sessionStorage.getItem("LastTime"); // timelol
if (startTime == null){
    startTime =  new Date;
    sessionStorage.setItem("LastTime", startTime);
}


document.getElementById("started").innerHTML = startTime;


function countdown(minutes, seconds )
{
    var hours, mins, msLeft, time;
    var tot_sec = minutes * 60   seconds;

    function twoDigits( n )
    {
        return (n <= 9 ? '0'   n : n);
    }

    function updateTimer()
    {
        //console.log("Start Time = "   startTime);

        var rightNow =  new Date;
        //console.log("Now        = "   rightNow);

        var dif_Date = rightNow - startTime;
        //console.log("Difft Time = "   dif_Date);

        var rest_seconds = tot_sec - Math.round((rightNow - startTime)/1000);
        console.log("Left Sec   = "   rest_seconds);

        if (rest_seconds < 1){
            window.location.replace('done');
        }else{
            time = new Date(tot_sec*1000 - dif_Date );
            hours = time.getUTCHours();
            mins = time.getUTCMinutes();
            var result_time = (hours ? hours   ':'   twoDigits( mins ) : mins)   ':'   twoDigits( time.getUTCSeconds() );
            document.getElementById('stored').innerHTML = result_time;

            setTimeout( updateTimer, time.getUTCMilliseconds()   500 );
        }
    }

    updateTimer();
}

countdown( 60, 0 );

</script>