如何将暗黑模式切换状态存入localStorage？现有函数优化需求

我来帮你把这个暗黑模式切换功能补上 localStorage 持久化，这样用户刷新页面后浏览器还能记住他们的模式偏好，完整实现代码如下：

$(function() {
  // 页面初始化时，读取 localStorage 里的暗黑模式状态
  const isDarkModeActive = localStorage.getItem('darkMode') === 'active';
  
  // 如果之前开启过暗黑模式，自动加载 dark.css
  if (isDarkModeActive) {
    injectDarkStylesheet();
  }

  $('#toggler').click(function() {
    const $darkStyle = $('link[href*="css/dark.css"]');
    
    if ($darkStyle.length) {
      // 移除样式表，同时更新 localStorage 状态
      $darkStyle.remove();
      localStorage.removeItem('darkMode');
    } else {
      // 添加样式表，标记暗黑模式为激活状态
      injectDarkStylesheet();
      localStorage.setItem('darkMode', 'active');
    }
  });

  // 封装添加 dark.css 的复用函数
  function injectDarkStylesheet() {
    const darkLink = $('<link>', {
      rel: 'stylesheet',
      href: 'css/dark.css'
    });
    $('head').append(darkLink);
  }
});

关键细节说明： #

• 初始化恢复状态：页面加载时先检查 localStorage 里的 darkMode 值，若为 active 就自动注入暗黑样式表，直接恢复用户之前的选择。
• 点击切换同步存储：点击按钮时，不仅切换样式表的存在状态，还同步更新 localStorage：移除样式表时清除存储标记，添加时写入激活状态。
• 代码复用优化：把创建并插入样式表的逻辑封装成单独函数，既避免重复代码，也让初始化和点击事件的逻辑更清晰。

小提示： #

• 如果你实际项目中 dark.css 的路径不是 css/dark.css，记得修改 href 属性的对应值。
• 要是需要兼容完全不支持 localStorage 的旧浏览器，可以给存储操作加个简单判断：if (typeof localStorage !== 'undefined')，避免出现报错。

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