javascript html local-storage countdowntimer

How can I share a countDown timer I created with js?

I created a countDown timer and it works great. Now what I would like to do is for this event to not refresh if I leave the site and also to share that event... is it possible to do it with js? Or will I have to use NodeJS? I'm sorry that the code is in Spanish. I think I could use localstorage but I've never used it before.

let segundo = 1000,
  minuto = segundo * 60,
  hora = minuto * 60,
  dia = hora * 24;

let btnComenzar = document.querySelector("#comenzar");
let h3 = document.querySelector("h3");

//Generando el evento en base a la fecha actual.
function generarEvento() {
  let fechaEvento = document.querySelector("#fecha").value;
  let evento = new Date(fechaEvento).getTime(); //transformo la fecha ingresada a local time

  setInterval(() => {
    let fechaActual = new Date().getTime();
    //Calculo para llegar a la fecha del evento . 
    let cuentaRegresiva = evento - fechaActual;

    document.querySelector("#dia").innerText = Math.floor(cuentaRegresiva / dia);

    document.querySelector("#hora").innerText = Math.floor((cuentaRegresiva % dia) / hora);

    document.querySelector("#minuto").innerText = Math.floor((cuentaRegresiva % hora) / minuto);

    document.querySelector("#segundo").innerText = Math.floor((cuentaRegresiva % minuto) / segundo);

    //Cuando el contador llega a 0, genero el cartel de llegada/comienzo del evento
    if (cuentaRegresiva < 0) {
      h3.innerHTML = "¡Ha llegado el día!";
      let contador = document.querySelector(".contador");
      contador.style.display = "none"
    };

  });

};

function initApp() {
  //genero el click inicial
  btnComenzar.addEventListener("click", () => {
    h3.innerHTML = ` Su ${document.querySelector("#evento").value} comenzara en:`;
    generarEvento();

  });
}
initApp()

* {
  margin: 0;
  padding: 0;
  box-sizing: content-box;
}

body {
  font-family: 'Source Code Pro', monospace;
  background-image: url("https://i.pinimg.com/736x/14/42/04/144204bbc9b0963dddf3efb5e8b62162.jpg");
  background-repeat: no-repeat;
  background-size: 100%;
}

.container {
  width: 90%;
  margin: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-bottom: 25px;
}

.container h1 {
  margin: 50px;
}

h1,
h3 {
  text-align: center;
}

input {
  margin-left: 5px;
}

#evento {
  max-width: 290px;
  padding: 5px
}

#fecha {
  width: 130px;
}

button {
  width: 100px;
  padding: 5px;
  margin: 25px;
  align-self: center;
  border-radius: 10px;
  background-color: rgb(127, 150, 255);
  align-self: start;
}

.btnIcone {
  display: flex;
  flex-direction: row;
  justify-content: center;
}


/*Seccion invitacion*/

.invitaciones {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.invitaciones {
  display: none;
}

.invitaciones h4 {
  margin: 10px;
  padding: 10px;
}

input {
  width: 250px;
  margin: 10px;
}


/*Comienzo del contador*/

.container h3 {
  margin: 50px;
}

ul {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
}

li {
  list-style-type: none;
}

li span {
  font-size: 3rem;
  display: block;
}

footer {
  background-color: black;
  padding: 20px
}

hr {
  height: 100px;
  color: black;
}


/*Segunda parte de la pagina*/

.videoEjemplo {
  width: 100%;
  display: flex;
  flex-direction: row;
  margin: auto;
  justify-content: center;
  align-items: center;
}

.videoHijo {
  width: 100%;
  margin: auto;
  display: flex;
  flex-direction: column;
}

iframe {
  max-width: 550px;
  margin: 20px;
}

footer span {
  color: aliceblue;
  margin: auto;
}

@media screen and (max-width: 450px) {
  h1 {
    font-size: 1rem;
  }
  button {
    align-self: center;
  }
  iframe {
    width: 300px;
    margin: 0px;
    align-self: center;
  }
  .videoHijo span {
    font-size: 1.6rem;
    align-self: center;
  }
}

@media screen and (max-width:767px) {
  .videoEjemplo {
    flex-direction: column;
    justify-content: center;
  }
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!--Google Fonts-->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght@1,600&display=swap" rel="stylesheet">
  <!--Font Awsome-->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ==" crossorigin="anonymous" referrerpolicy="no-referrer"
  />
  <!--Css propio-->
  <link rel="stylesheet" href="./css/style.css">
  <link rel="stylesheet" href="./css/modal.css">
  <title>Crea tu cuenta regresiva </title>
</head>

<body>
  <!--Seccion del modal-->
  <div class="modalBody">
    <div id="miModal" class="modal">
      <div class="contModal">
        <div class="modalHeader">
          <!--header del modal-->
          <span class="cerrar">&times;</span>
          <h2>Aviso</h2>
        </div>
        <!--fin header del modal-->
        <div class="cuerpoModal">
          <!--Cuerpo del modal-->
          <p>Por favor, no deje los campos vacíos.</p>
        </div>

      </div>
      <!--Fin "ContModal"-->
    </div>
    <!--Fin de "modal"-->
  </div>
  <!--Fin del modal-->







  <div class="container">
    <h1>Le damos la bienvenida a nuestro sitio donde va a poder crear su propia cuenta regresiva</h1>

    <label for="evento" class="evento">Ingrese el nombre de su evento </label>
    <input type="text" name="evento" id="evento" required><br>
    <label for="fecha">Ingrese la fecha del evento</label>
    <input type="datetime-local" name="fecha" id="fecha" required>

    <div class="btnIcon">
      <button type="submit" id="comenzar">Comenzar cuenta regresiva</button>
      <i class="fas fa-share-alt"> Compartir evento(proximamente)</i>
    </div>



    <div class="invitaciones">
      <h4> Crear lista de invitados (proximamente)</h4>
      <label for="nombreInvitado">Nombre del invitado: </label>
      <input type="text" name="nombreInvitado" id="nombreInvidado">
      <label for="email">Email del invitado: </label>
      <input type="email" name="email" id="email">
    </div>
  </div>

  <div class="container ">
    <h3>Su evento comenzará en</h3>
    <ul class="contador">
      <li><span id="dia"></span> Días</li>
      <li><span id="hora"></span> Horas</li>
      <li><span id="minuto"></span> Minutos</li>
      <li><span id="segundo"></span> Segundos</li>
    </ul>

  </div>

  <hr>
  <div class="container">
    <h3>Videos desde donde base mi código</h3>
    <div class="videoEjemplo">

      <div class="videoHijo">

        <span>Contador</span>
        <iframe height="315" src="https://www.youtube.com/embed/4k71G0tPJnA" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
      </div>

      <div class="videoHijo">
        <span>Modal</span>
        <iframe height="315" src="https://www.youtube.com/embed/6ophW7Ask_0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
      </div>

    </div>
  </div>
  <footer>
    <span>Creado por Natacha Vergara</span>
  </footer>


  <script src="./js/script.js"></script>
  <script src="./js/modal.js"></script>
</body>

</html>

Solution

One way to do this is to store the initial data (name and date):

//Generando el evento en base a la fecha actual.
function generarEvento() {
    let fechaEvento = document.querySelector("#fecha").value;
    let evento = new Date(fechaEvento).getTime();//transformo la fecha ingresada a local time

    setInterval(() => {
        let fechaActual = new Date().getTime();
        //Calculo para llegar a la fecha del evento . 
        let cuentaRegresiva = evento - fechaActual;

        document.querySelector("#dia").innerText = Math.floor(cuentaRegresiva / dia);

        document.querySelector("#hora").innerText = Math.floor((cuentaRegresiva % dia) / hora);

        document.querySelector("#minuto").innerText = Math.floor((cuentaRegresiva % hora) / minuto);

        document.querySelector("#segundo").innerText = Math.floor((cuentaRegresiva % minuto) / segundo);

        //Cuando el contador llega a 0, genero el cartel de llegada/comienzo del evento
        if (cuentaRegresiva < 0) {
            h3.innerHTML = "¡Ha llegado el día!";
            let contador = document.querySelector(".contador");
            contador.style.display = "none"
        };

        var obj = { 
            "name": document.querySelector("#evento").value, 
            "date": fechaEvento
        };
        localStorage.setItem("stored", JSON.stringify(obj));
    });

};

These are the relevant lines that changed:

var obj = { 
    "name": document.querySelector("#evento").value, 
    "date": fechaEvento
};
localStorage.setItem("stored", JSON.stringify(obj));

This creates a tiny JSON object and stores it in the localStorage. Now you just need to check this object when the page load:

function initApp() {
    //genero el click inicial
    btnComenzar.addEventListener("click", () => {
        h3.innerHTML = ` Su ${document.querySelector("#evento").value} comenzara en:`;
        generarEvento();
    });

    let obj = JSON.parse(localStorage.getItem("stored"));
    if (obj) {
        document.querySelector("#evento").value = obj.name;
        document.querySelector("#fecha").value = obj.date;
        generarEvento();
    }

}

I automatically put the values in the textbox and the date picker elements. Then call the generarEvento() function to resume the timer.

If you don't want to use a JSON object you can simply store the date and the name separately, or comma separated (and then split to get them back), or whatever way you wish. Since the object is so small, I don't care about the JSON.stringify and JSON.parse overhead on load and on save. However, this should give you an idea on how to update the object in the event you eventually decide to provide multiple countDowns instead of just one, simply store an array of your little objects in one single localStorage item.