如何通过LocalStorage保存jQuery主题切换状态，实现页面重载后主题保留

要让主题状态在页面刷新或切换后保持不变，只需在主题切换时将状态存入localStorage，并在页面加载时读取状态自动应用对应主题，具体修改如下：

1. 主题切换时保存状态 #

在两个主题激活函数末尾添加localStorage存储逻辑，记录当前选中的主题：

function orangeThemeActivation() {
    $("#orange-theme").removeAttr("disabled", "disabled");
    $(" .to-green-blue-theme").attr(
      "style",
      "display: block !important; background: linear-gradient(to right, #14b0af 0%, #14b0af 50%, #004AAB 50%, #004AAB 100%); vertical-align:middle !important;"
    );
    $(this).attr("style", "display: none !important");
    $("body").addClass("orange-mode");
    $("body").removeClass("green-blue-mode");
    $("img[src*='/images/']").prop("src", (_index, oldURL) => {
      const url = new URL(oldURL);
      url.pathname = url.pathname.replace("/assets/images/", "/assets/orange/");
      return url;
    });
    // 保存橙色主题到本地存储
    localStorage.setItem('selectedTheme', 'orange');
  }
  
  function greenBlueThemeActivation() {
    $("#orange-theme").attr("disabled", "disabled");
    $(" .to-orange-theme").attr(
      "style",
      "display: block !important; background: orange !important; vertical-align:middle !important;"
    );
    $(this).attr("style", "display: none !important");
    $("body").addClass("green-blue-mode");
    $("body").removeClass("orange-mode");
    $("img[src*='/orange/']").prop("src", (_index, oldURL) => {
      const url = new URL(oldURL);
      url.pathname = url.pathname.replace("/assets/orange/", "/assets/images/");
      return url;
    });
    // 保存绿蓝主题到本地存储
    localStorage.setItem('selectedTheme', 'green-blue');
  }

2. 页面加载时自动恢复主题 #

新增初始化函数，在DOM加载完成后读取本地存储的主题状态，自动触发对应主题的切换逻辑；若没有存储状态，默认应用绿蓝主题：

function initTheme() {
  const savedTheme = localStorage.getItem('selectedTheme');
  if (savedTheme === 'orange') {
    // 触发橙色主题按钮的点击事件，复用原有逻辑
    $("#orange-color-changer").trigger('click');
  } else {
    // 默认应用绿蓝主题
    $("#green-blue-color-changer").trigger('click');
  }
}

// DOM加载完成后绑定事件并初始化主题
$(document).ready(function() {
  $("#green-blue-color-changer").click(greenBlueThemeActivation);
  $("#orange-color-changer").click(orangeThemeActivation);
  initTheme();
});

补充说明 #

• 使用trigger('click')可以直接复用原有点击逻辑，避免重复编写主题切换代码；若不想模拟点击，也可将主题切换的核心逻辑抽离为独立函数，分别在点击事件和初始化时调用。
• localStorage中的数据会永久保留，直到用户手动清除浏览器缓存或代码调用localStorage.removeItem('selectedTheme')清除状态。

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