El objetivo es eliminar el elemento de almacenamiento local después de 24 horas, lo que significa mostrar modal solo una vez al día todos los días. Se establece el valor de almacenamiento local. Sin embargo, mi condición para verificar si el elemento de almacenamiento local no existe y han pasado 24 horas, luego mostrar modal solo funciona a la mitad. Necesito que caduque el modal (no se muestre) si el valor de almacenamiento local se ha establecido por menos de 24 horas. Actualmente, no elimina el elemento de almacenamiento local y muestra el modal solo una vez en la carga. Si actualiza la página después del período de tiempo, el elemento de almacenamiento local todavía está allí. Usando Sweet Alert para modal, pero eso no debería importar, no creo. Tampoco estoy seguro de si necesito un bucle for o establecer un intervalo de tiempo para esto.
Para facilitar las pruebas durante un minuto, también puede usar:
expires = expires.setMinutes(expires.getMinutes() + 1);Esto es lo que probé:
$(document).ready(function() { if (window.localStorage) { var currentUser = '<%= current_user %>'; var swal_alert = localStorage.getItem('alert'); var currentTime = new Date($.now()); var expires = new Date(); expires = expires.setHours(expires.getHours() + 24); if (currentUser && swal_alert !=1 && currentTime < expires) { swal ({ icon: 'warning', text: 'Notice text here.', closeOnClickOutside: false, button: 'ok' }) } else { localStorage.removeItem('alert'); } localStorage.setItem('alert', '1'); } }Siempre está ejecutando localStorage.setItem('alert', '1'); al final de su función. Incluso si se ejecuta su cláusula else , no es efectiva porque está restableciendo el campo inmediatamente después.
Otra cosa a tener en cuenta es que su expires siempre será mayor que el tiempo currentTime , porque definió el expires como currentTime + 24 hours . new Date() simplemente devuelve la hora actual.
Una forma de implementar lo que desea es almacenar la marca de tiempo de la última vez que se mostró el modal, si son menos de 24 horas, no muestre el modal, de lo contrario, muestre el modal y actualice la marca de tiempo.
$(document).ready(function() { if (window.localStorage) { const currentUser = '<%= current_user %>'; if (currentUser && shouldShowModal()) { swal ({ icon: 'warning', text: 'Notice text here.', closeOnClickOutside: false, button: 'ok' }) localStorage.setItem('modalTimestamp', new Date().getTime()); } } } function shouldShowModal() { const lastTimestamp = localStorage.getItem("modalTimestamp") if (!lastTimestamp) { // modal was never shown return true } const parsedTimestamp = parseInt(lastTimestamp, 10) // localStorage always store values in strings let expiryLimit = new Date(parsedTimestamp) expiryLimit = expiryLimit.setMinutes(expiryLimit.getMinutes() + 1) // or hours... return new Date() > expiryLimit } Otra cosa que quiero mencionar es que los navegadores no proporcionan API donde puede "programar" código como "hacer esto después de X horas". Tiene las funciones setTimeout y setInterval , pero funcionan siempre que la pestaña esté activa y no se debe confiar en ellas.
Desea mostrar modal solo una vez al día. Por lo tanto, debe mantener ese tiempo en algún lugar para realizar un seguimiento si ya han pasado 24 horas desde la última visualización modal. Aquí está mi enfoque sin jquery (los fragmentos no pueden acceder al almacenamiento local, por lo que puede tener problemas):
<!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" /> <title>Document</title> </head> <body> <h1>Alerts once per day</h1> </body> <script defer> function alertUser() { if (localStorage.getItem('alertTime') < new Date()) { alert('test'); var nextAlert = new Date().setSeconds(new Date().getSeconds() + 10); localStorage.setItem('alertTime', nextAlert); console.log('avaiable'); } } Window.onload = alertUser(); </script> </html>