Discussion on: Reload page after a set interval ?

View post

hey,
so you want a normal site that doesn't reload unless someone clicks a button and then it should reload every 5 seconds?
you could use localStorage to check whether to reload every 5 seconds or not. here is a small example:

<div id="counter"></div>
<button id="start-counter">start reloading after every 5 seconds</button>
<button id="stop-counter">stop reloading after every 5 seconds</button>
<script>
  let reloadTimeout = null;
  const startReloading = () =>
    (reloadTimeout = setTimeout(() => window.location.reload(), 5000));
  const counterElement = document.getElementById("counter");
  const startCounterElement = document.getElementById("start-counter");
  const stopCounterElement = document.getElementById("stop-counter");
  startCounterElement.addEventListener("click", () => {
    localStorage.reloadActive = true;
    startReloading();
  });
  stopCounterElement.addEventListener("click", () => {
    localStorage.reloadActive = false;
    clearTimeout(reloadTimeout);
  });
  let counter = 0;
  window.addEventListener("load", (event) => {
    if (localStorage.reloadActive === "true") {
      startReloading();
    }
  });
  setInterval(() => {
    counterElement.innerHTML = counter++;
  }, 1000);
</script>