Tengo un sitio web que muestra un modelo en carga de índice. Actualmente se carga cada vez que vas a la página de índice. Se vuelve muy molesto para los usuarios del sitio web. Me preguntaba si solo puedo mostrarlo una vez por hora por usuario. El sitio web se encuentra en wikiraces.com
<!-- MODAL FOR NEWS--> <div id="div1" class="modal"> <!-- Modal content --> <div class="modal-content"> <span class="close">×</span> </div> <!-- Modal content --> <div class="modal-content"> <div class="modal-header"> <span class="close">×</span> <h2>New Features/Updates</h2> </div> <div class="modal-body"> <h4> <p>The Fewest Clicks Game is Back!</p> </h4> <p> It was down for maintanece for 14 hours but finally it is back </p> <h4> The Multiplayer host random page is here! </h4> <p> You can now play multiplayer without the hassle of chosing your own start! <br> <br> <a href="/html/about.html"> <b> Report bugs </b></a> </p> </div> <div class="modal-footer"> <h5> Enjoy, and remember to share this website with your friends! </h5> </div> </div> </div> </div> <script> // Get the modal var modal = document.getElementById("div1"); // Get the <span> element that closes the modal var spanTimed = document.getElementsByClassName("close")[0]; // When the user clicks on the button, open the modal window.onload = function() { modal.style.display = "block"; } // When the user clicks on <span> (x), close the modal spanTimed.onclick = function() { modal.style.display = "none"; } // When the user clicks anywhere outside of the modal, close it window.onclick = function(event) { if (event.target == modal) { modal.style.display = "none"; } } </script>Podemos almacenar la última vez que se abrió el modal en localStorage y cada vez que el usuario visita el sitio, podemos verificar la diferencia entre el tiempo almacenado y el tiempo actual. Si el tiempo empleado es superior a una hora, muestra el modal.
window.addEventListener('load', () => { let time = localStorage.getItem('time'); if ( time === null ) { localStorage.setItem('time', new Date()); modal.style.display = "block"; return; } let current = new Date(); if ( current - time >= 60 * 60 * 1000 ) { modal.style.display = "block"; } })