如何使用localStorage存储dark-mode选项，实现页面重载后保留用户主题偏好？

存在的问题 #

• 切换模式时存储逻辑错误：你在toggleClass后固定设置localStorage.setItem('isDarkMode', "true")，无论用户切换到亮色还是暗色模式，存储的值永远是true，无法记录亮色模式的选择。
• 初始化代码API拼写错误+逻辑错误：document.getElementByClass是错误的API，正确原生API为document.getElementsByClassName，且该API返回的是元素集合，不能直接调用classList；同时你混淆了类名的作用对象：dark-mode是要加在body元素上的类，active是要加在切换按钮上的类，你的代码逻辑完全写反了。
• 初始化时机错误：如果单独写的初始化代码运行时切换按钮还没加载完成，给按钮加active的操作会失效。

修复方案 #

你不需要单独在主页面额外加初始化脚本，直接修改原有NioApp.ModeSwitch函数即可，修复后完整代码如下：

NioApp.ModeSwitch = function() {
    // 如果原有代码没有提前定义$body，保留下面这行
    var $body = $('body');
    var toggle = $('.dark-switch');
    // 初始化时读取本地存储，设置body和按钮的对应状态
    const isDarkMode = localStorage.getItem('isDarkMode') === 'true';
    if (isDarkMode) {
        $body.addClass('dark-mode');
        toggle.addClass('active');
    } else {
        $body.removeClass('dark-mode');
        toggle.removeClass('active');
    }
    toggle.on('click', function(e){
        e.preventDefault();
        $(this).toggleClass('active');
        $body.toggleClass('dark-mode');
        // 存储当前真实的模式状态
        localStorage.setItem('isDarkMode', $body.hasClass('dark-mode'));
    })
}

只要保证NioApp.ModeSwitch()在DOM加载完成后调用即可生效。

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