How to keep the current values of the countdown timer after page reload?

unset 0
Viewed 44

UPD: The problem was solved. The code beyond is work!

I was using a variable in localStorage incorrectly, so the timer keep resetting after page reload or when I revisited the page. The problem was solved. Thanks everyone for attention.

const DAYS = document.getElementById("days");
const HOURS = document.getElementById("hours");
const MINUTES = document.getElementById("minutes");
const SECONDS = document.getElementById("seconds");

let expireDate = new Date().setMilliseconds(new Date().getMilliseconds() + 900_100); // 900_100ms = 15min 0.1sec

const countingAndSetTimeUnits = () => {
  let days;
  let hours;
  let minutes;
  let seconds;
  let timeLeft;

  const dateNow = new Date().getTime();

  if (!window.localStorage.getItem("_texpd")) {
    localStorage.setItem("_texpd", JSON.stringify(expireDate));
  }

  if (window.localStorage.getItem("_texpd")) {
    timeLeft = localStorage.getItem("_texpd") - dateNow;
  }

  days = Math.floor(timeLeft / 1000 / 60 / 60 / 24);
  hours = Math.floor(timeLeft / 1000 / 60 / 60) % 24;
  minutes = Math.floor(timeLeft / 1000 / 60) % 60;
  seconds = Math.floor(timeLeft / 1000) % 60;

  if (days < 0) days = 0;
  if (hours < 0) hours = 0;
  if (minutes < 0) minutes = 0;
  if (seconds < 0) seconds = 0;

  DAYS.innerText = days;
  HOURS.innerText = hours;
  MINUTES.innerText = minutes;
  SECONDS.innerText = seconds;
};

countingAndSetTimeUnits();

const interval = setInterval(() => {
  if (
    DAYS.innerText <= "0" &&
    HOURS.innerText <= "0" &&
    MINUTES.innerText <= "0" &&
    SECONDS.innerText <= "0"
  ) {
    clearInterval();
  } else {
    countingAndSetTimeUnits();
  }
}, 1000);
javascript
2 Answers

Just with JS its not possible, you should use cookies

With that functions, you will get your cookie, and if it exist retrieve and then save it.

const countingAndSetTimeUnits = () => {
  let days;
  let hours;
  let minutes;
  let seconds;

  let dateNow = new Date();
  
  if (getCookie("DAYS") != ""){
    dateNow.setDate(getCookie("DAYS"));
    dateNow.setHours(getCookie("HOURS"));
    dateNow.setMinutes(getCookie("MINUTES"));
    dateNow.setSeconds(getCookie("SECONDS"));
  }
  else{
    dateNow = new Date().getTime();
  }
  
  const timeLeft = expireDate - dateNow;

  days = Math.floor( timeLeft / 1000 / 60 / 60 / 24);
  hours = Math.floor( timeLeft / 1000 / 60 / 60) % 24;
  minutes = Math.floor( timeLeft / 1000 / 60) % 60;
  seconds = Math.floor( timeLeft / 1000) % 60;

  if (!days) daysContainer.classList.add(hidden);
  if (!hours) hoursContainer.classList.add(hidden);

  DAYS.innerText = days;
  HOURS.innerText = hours;
  MINUTES.innerText = minutes;
  SECONDS.innerText = seconds;


  setCookie("DAYS", "days", 1);
  setCookie("HOURS", "hours", 1);
  setCookie("MINUTES", "minutes", 1);
  setCookie("SECONDS", "seconds", 1);
};

function setCookie(cname, cvalue, exdays) {
  const d = new Date();
  d.setTime(d.getTime() + (exdays*24*60*60*1000));
  let expires = "expires="+ d.toUTCString();
  document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}

function getCookie(cname) {
  let name = cname + "=";
  let decodedCookie = decodeURIComponent(document.cookie);
  let ca = decodedCookie.split(';');
  for(let i = 0; i <ca.length; i++) {
    let c = ca[i];
    while (c.charAt(0) == ' ') {
      c = c.substring(1);
    }
    if (c.indexOf(name) == 0) {
      return c.substring(name.length, c.length);
    }
  }
  return "";
}
SrAlbert0

I figured it out using localStorage. I added a check if the expireDate value exists in localStorage - use it for calculation; if not, create it and use it for calculation. If you're interested, I've posted the final code in my question above. So you can use it to implement your own timer on the site.

unset0
Related