1

Lo que quiero es que solo una vez obtenga la hora y al refrescar la pagina no cambie la hora porque es la hora de la ultima visita.

$(document).ready(function(){
  var time = new Date();
 document.getElementById("hora").innerHTML =  time.toLocaleString('en-US', { hour: 'numeric', minute: 'numeric', second: 'numeric' , hour12: true })
});
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
</head>
<body>

<p>Hora</p>
<p id="hora"></p>

</body>
</html>

1
  • Hola, cuál sería la lógica del script? Quien la ve actualizada o quien no debería?
    – Jorge B
    Commented el 6 jun. 2023 a las 19:35

1 respuesta 1

2

En este caso vendría mejor trabajar con localstorage.


Primero tendrías que validar si existe un valor almacenado en el localstorage. Si existe, solamente mostramos en pantalla ese valor, si no existe, obtenemos la última hora y enviamos ese valor al localstorage, para que así en la siguiente vez que recarguemos la página, el valor ya existiría, cumpliendo el primer if (quien se encarga de mostrar sólo ese valor y no volverlo a actualizar).


Ejemplo:

$(document).ready(function() {
  let valorStorage = localStorage.getItem("time"); // intentamos recoger el valor almacenado en el localstorage.

  if (valorStorage) { // si ese valor existe...
    document.getElementById("hora").innerHTML = valorStorage; // solo mostramos en pantalla.
  } else { // de lo contrario...
    // obtenemos la hora actual...
    let time = new Date();
    let formatoTime = time.toLocaleString('en-US', { hour: 'numeric', minute: 'numeric', second: 'numeric', hour12: true });
    
    document.getElementById("hora").innerHTML = formatoTime; // mostramos la hora actual en pantalla
    localStorage.setItem("time", formatoTime); // y almacenamos la hora actual en localstorage
    
    // hasta aquí ya almacenamos el valor al localstorage, y al recargar la página, cumplirá el primer if ya que el valor existe, y ya no volverá a actualizar la hora actual.
  }

  // Probemos limpiar el localstorage
  $("#limpiar").click(function(){
    localStorage.removeItem("time");
    document.getElementById("hora").innerHTML = "";
  });
});
<p>Hora</p>
<p id="hora"></p>

<button id="limpiar">Limpiar Storage</button>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>

Extrañamente, los Snippets de SO no permiten trabajar con localstorage (o la verdad no se que suceda), sin embargo, aquí te adjunto un ejemplo hecho en CodePen (en incógnito no funciona).

3
  • 1
    Muchas gracias Cris me funciona muy bien la solucion. Commented el 6 jun. 2023 a las 20:46
  • @Cris es una restricción del sandbox de los navegadores, en el que corren los ejemplos que pones en snippets en SO.
    – jachguate
    Commented el 6 jun. 2023 a las 20:50
  • @jachguate gracias, no tenía entendido porqué ocurría eso. Commented el 6 jun. 2023 a las 20:51

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.