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).