基于jQuery实现主题切换状态持久化存储的技术问询

你现有的HTML代码不用改动，只需要调整jQuery部分，借助localStorage实现状态持久化即可，具体修改如下：

修改后的jQuery代码 #

// 页面加载时恢复之前保存的主题状态
$(document).ready(function() {
    const savedTheme = localStorage.getItem('theme');
    // 根据存储的状态设置body类
    if (savedTheme === 'dark') {
        $('body').addClass('dark');
    } else {
        $('body').removeClass('dark');
    }
});

// 切换深色主题并保存状态
$('.theme_toggle_dark').click(function () {
    $('body').addClass('dark');
    localStorage.setItem('theme', 'dark');
});

// 切换浅色主题并保存状态
$('.theme_toggle_light').click(function () {
    $('body').removeClass('dark');
    localStorage.setItem('theme', 'light');
});

逻辑说明 #

• 页面初始化阶段：通过localStorage.getItem('theme')读取之前存在本地的主题选择，直接同步到body的类名上
• 点击切换主题时：在修改body类的同时，用localStorage.setItem把当前主题状态存入本地存储，确保刷新页面后状态不会丢失

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