如何实现勾选后自动刷新页面且保留输入值的复选框？

一、先修复自动刷新的定时器逻辑 #

你的原有JS代码存在两个关键问题：

1. timeoutID 是函数内部的局部变量，取消勾选时无法访问到这个变量，导致定时器清不掉
2. setTimeout 传入字符串参数存在安全风险，且不是最佳实践

修改后的自动刷新逻辑：

let checkbox;
let timeoutID = null; // 把定时器ID提升到全局作用域

function auto_refresh() {
    if(checkbox.checked) {
        // 用箭头函数代替字符串，避免eval风险
        timeoutID = setTimeout(() => window.location.reload(), 5000);
    } else {
        if(timeoutID) {
            clearTimeout(timeoutID);
            timeoutID = null; // 清除后重置ID，避免重复操作
        }
    }
}

二、用localStorage保存表单状态，刷新后自动恢复 #

页面刷新后表单会回到默认值，我们可以通过浏览器的localStorage存储用户的输入状态，页面加载时再读取恢复：

1. 保存状态的函数 #

监听所有输入控件的变化，把表单状态转成JSON字符串存在localStorage里：

function saveFormState() {
    const formState = {
        start_date: document.getElementById('start_date').value,
        end_date: document.getElementById('end_date').value,
        auto_refresh: document.getElementById('auto_refresh').checked,
        show_desc: document.getElementById('show_desc').checked,
        col_width: document.getElementById('col_width').value
    };
    localStorage.setItem('formState', JSON.stringify(formState));
}

2. 恢复状态的函数 #

页面加载时从localStorage读取保存的状态，赋值给对应控件：

function loadFormState() {
    const savedState = localStorage.getItem('formState');
    if(savedState) {
        const formState = JSON.parse(savedState);
        document.getElementById('start_date').value = formState.start_date;
        document.getElementById('end_date').value = formState.end_date;
        document.getElementById('auto_refresh').checked = formState.auto_refresh;
        document.getElementById('show_desc').checked = formState.show_desc;
        document.getElementById('col_width').value = formState.col_width;
    }
}

三、整合后的完整代码 #

注意：原HTML里end_date的input有重复的id属性，已经修正；所有事件绑定统一放在DOMContentLoaded回调里，确保DOM加载完成后再执行：

<section id="menu">
    <div class="menu_item">
         From <input type="date" name="start_date" id="start_date"> To <input type="date" id="end_date">
         <button id="set_dates">Set dates</button>
    </div>
    <div class="menu_item">
         <input type="checkbox" name="auto_refresh" id="auto_refresh" checked> Auto refresh
    </div>
    <div class="menu_item">
         <input type="checkbox" name="show_desc" id="show_desc"> Show descriptions
    </div>
    <div class="menu_item">
         Column width <input type="number" name="col_width" id="col_width" min="100" max="5000" value="100" >
    </div>
</section>

<script>
let checkbox;
let timeoutID = null;

// 恢复表单状态
function loadFormState() {
    const savedState = localStorage.getItem('formState');
    if(savedState) {
        const formState = JSON.parse(savedState);
        document.getElementById('start_date').value = formState.start_date;
        document.getElementById('end_date').value = formState.end_date;
        document.getElementById('auto_refresh').checked = formState.auto_refresh;
        document.getElementById('show_desc').checked = formState.show_desc;
        document.getElementById('col_width').value = formState.col_width;
    }
}

// 保存表单状态
function saveFormState() {
    const formState = {
        start_date: document.getElementById('start_date').value,
        end_date: document.getElementById('end_date').value,
        auto_refresh: document.getElementById('auto_refresh').checked,
        show_desc: document.getElementById('show_desc').checked,
        col_width: document.getElementById('col_width').value
    };
    localStorage.setItem('formState', JSON.stringify(formState));
}

// 自动刷新逻辑
function auto_refresh() {
    if(checkbox.checked) {
        timeoutID = setTimeout(() => window.location.reload(), 5000);
    } else {
        if(timeoutID) {
            clearTimeout(timeoutID);
            timeoutID = null;
        }
    }
}

// 页面初始化流程
window.addEventListener('DOMContentLoaded', () => {
    checkbox = document.getElementById("auto_refresh");
    
    // 先恢复之前保存的表单状态
    loadFormState();
    
    // 根据恢复后的状态初始化自动刷新
    if(checkbox.checked) {
        auto_refresh();
    }
    
    // 绑定自动刷新复选框的变化事件
    checkbox.addEventListener('change', () => {
        auto_refresh();
        saveFormState(); // 状态变化时立即保存
    });
    
    // 绑定其他输入控件的保存事件
    document.querySelectorAll('#menu input').forEach(input => {
        // 复选框、单选框用change事件
        input.addEventListener('change', saveFormState);
        // 日期、数字输入框实时保存
        if(input.type === 'date' || input.type === 'number') {
            input.addEventListener('input', saveFormState);
        }
    });
    
    // 日期设置按钮点击时保存状态
    document.getElementById('set_dates').addEventListener('click', saveFormState);
});
</script>

额外说明 #

• localStorage 的数据会永久保存在浏览器中，除非用户手动清除；如果希望关闭标签页后数据失效，可以换成 sessionStorage
• 所有输入控件的状态都会实时保存，刷新页面后自动恢复到之前的设置
• 原代码中setTimeout的5000毫秒是5秒，你可以根据需求修改成需要的间隔（比如300000毫秒=5分钟）

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