如何实现每日21点仅单次自动跳转至指定HTML页面？

之前的代码会在指定时段内每次页面加载都触发跳转，导致无法返回首页。要实现每日21点仅单次跳转至打烊页面，核心是用本地存储记录当日是否已完成跳转，避免重复执行。

优化后的代码 #

<script type="text/javascript">
    const now = new Date();
    const currentHour = now.getHours();
    // 获取当日日期字符串（格式：YYYY-MM-DD），用于标记是否已跳转
    const today = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}-${String(now.getDate()).padStart(2, '0')}`;
    // 从本地存储获取当日跳转标记
    const hasClosedToday = localStorage.getItem('hasClosedToday');

    // 仅当当前是21点，且当日未执行过跳转时，才触发跳转
    if (currentHour === 21 && hasClosedToday !== today) {
        // 跳转至打烊页面
        location.href = "closed.html";
        // 标记当日已完成跳转
        localStorage.setItem('hasClosedToday', today);
    }
</script>

代码说明 #

• 日期标记：用YYYY-MM-DD格式的日期作为标记值，确保每天的标记独立，第二天自动失效，无需手动重置。
• 本地存储：localStorage会持久保存在终端浏览器中，除非手动清除或浏览器数据被删除，能有效记录当日跳转状态。
• 触发条件：仅在当前小时等于21时才检查跳转，避免其他时段误触发；同时通过标记确保当日只跳转一次，即使刷新页面也不会重复跳转。

测试与重置 #

如果需要测试跳转逻辑，可以：

• 临时修改currentHour === 21为当前小时（比如currentHour === 15），测试触发跳转后是否不再重复跳转。
• 清除本地存储的标记：打开浏览器控制台（F12），执行localStorage.removeItem('hasClosedToday')，即可重置当日跳转状态。

内容的提问来源于stack exchange，提问作者BBE