如何在jQuery中实现页面刷新后保留深色模式切换状态？

你的代码存在几个核心问题导致刷新后状态丢失：

• 仅在复选框点击事件中处理本地存储，页面加载时未读取本地存储初始化状态
• 本地存储操作错误（localStorage.clear(theme) 用法错误，clear() 无需参数，且应该用 removeItem 删除指定键）
• 类名存储逻辑错误（你存储的是标签名而非实际的深色模式类名）
• 复选框状态设置用了 attr，应该用 prop 来处理布尔属性

以下是修复后的完整代码：

HTML（无需修改，保持原样） #

<div class="container">
    <label for="check">change theme: </label>
    <input type="checkbox" name="" id="check" class="checkbox" />
</div>

jQuery 修复代码 #

jQuery(document).ready(function () {
    // 抽离主题切换逻辑为复用函数
    function toggleDarkMode(isEnabled) {
        const bodyClass = 'night-mode'; // 替换为你实际的body深色类名
        const containerClass = 'night-details'; // 替换为你实际的container深色类名
        
        if (isEnabled) {
            jQuery('body').addClass(bodyClass);
            jQuery('.container').addClass(containerClass);
            // 存储状态到本地存储
            localStorage.setItem('night-theme', JSON.stringify({
                enabled: true,
                bodyClass,
                containerClass
            }));
        } else {
            jQuery('body').removeClass(bodyClass);
            jQuery('.container').removeClass(containerClass);
            // 删除本地存储的主题设置
            localStorage.removeItem('night-theme');
        }
        // 同步复选框状态
        jQuery('#check').prop('checked', isEnabled);
    }

    // 页面加载时初始化主题状态
    const savedTheme = localStorage.getItem('night-theme');
    if (savedTheme) {
        const themeData = JSON.parse(savedTheme);
        toggleDarkMode(themeData.enabled);
    } else {
        // 默认关闭深色模式
        toggleDarkMode(false);
    }

    // 复选框切换事件
    jQuery('#check').change(function () {
        toggleDarkMode(this.checked);
    });
});

关键修改说明： #

1. 页面初始化逻辑：在document.ready中直接读取本地存储，调用toggleDarkMode初始化主题和复选框状态，解决刷新后状态丢失的问题
2. 复用函数：把主题切换的重复逻辑抽成toggleDarkMode函数，避免代码冗余
3. 本地存储优化：存储更清晰的状态数据（是否启用、对应的类名），取消时用removeItem删除指定键，而非清空整个本地存储
4. 复选框状态修正：用prop('checked', isEnabled)替代attr，正确处理布尔类型的表单属性
5. 类名修正：存储实际的深色模式类名（而非标签名），确保addClass/removeClass能正确生效

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