如何修改JS代码实现跨页面保留Dark Mode状态？

我在导航栏按钮的onclick事件里写了一段切换CSS暗黑模式的JS函数，但切换页面后暗黑模式状态会重置。现有代码如下：

var $light_switch = 1;

function switchMode() {
    document.body.classList.toggle("dark-mode");
    document.body.style = "transition: all 2s;";
    if($light_switch == 0) {
        document.getElementById("lights").innerHTML = "Enable Dark Mode";
        document.getElementById("lights").style = "background-color: #f5f5f5; color: #121212; ";
        $light_switch = 1;
    }else {
        document.getElementById("lights").innerHTML = "Disable Dark Mode";
        document.getElementById("lights").style = "background-color: #121212; color: #f5f5f5; ";
        $light_switch = 0;
    }
    document.getElementById("lights").style = " transition: all 2s;";
}

请问如何修改这段JS代码，确保暗黑模式启用后直到再次点击按钮才关闭？

核心思路是把暗黑模式的状态存在浏览器的localStorage里，页面加载时读取这个状态并应用，切换时更新状态并同步到localStorage。

修改后的代码如下：

// 页面加载时读取localStorage的状态，默认是浅色模式（1）
let $light_switch = localStorage.getItem('darkMode') === '0' ? 0 : 1;

// 页面初始化时根据状态应用模式
function initMode() {
    if ($light_switch === 0) {
        document.body.classList.add("dark-mode");
        document.getElementById("lights").innerHTML = "Disable Dark Mode";
        document.getElementById("lights").style = "background-color: #121212; color: #f5f5f5; transition: all 2s;";
    } else {
        document.body.classList.remove("dark-mode");
        document.getElementById("lights").innerHTML = "Enable Dark Mode";
        document.getElementById("lights").style = "background-color: #f5f5f5; color: #121212; transition: all 2s;";
    }
    document.body.style = "transition: all 2s;";
}

// 切换模式函数
function switchMode() {
    document.body.classList.toggle("dark-mode");
    document.body.style = "transition: all 2s;";
    
    if ($light_switch === 0) {
        document.getElementById("lights").innerHTML = "Enable Dark Mode";
        document.getElementById("lights").style = "background-color: #f5f5f5; color: #121212; transition: all 2s;";
        $light_switch = 1;
        localStorage.setItem('darkMode', '1');
    } else {
        document.getElementById("lights").innerHTML = "Disable Dark Mode";
        document.getElementById("lights").style = "background-color: #121212; color: #f5f5f5; transition: all 2s;";
        $light_switch = 0;
        localStorage.setItem('darkMode', '0');
    }
}

// 页面加载完成后初始化模式
window.onload = initMode;

关键修改点： #

• 用localStorage.getItem读取之前保存的状态，避免页面刷新/跳转后丢失
• 新增initMode函数，页面加载时自动应用保存的模式
• 每次切换模式时，用localStorage.setItem更新状态到本地存储
• 把var换成let，更符合现代JS规范
• 修复原代码中按钮样式被覆盖的问题（原代码最后一行会重置按钮样式，现在把transition整合到每个分支的style里）

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