如何在页面刷新后持久化保存 jQuery 主题切换状态-html教程-PHP中文网

如何在页面刷新后持久化保存 jQuery 主题切换状态

本文介绍如何利用 localstorage 在用户刷新页面后仍保持暗色模式（dark mode）的切换状态，通过优化 jquery 事件绑定与数据读写逻辑，确保主题类名和复选框状态准确还原。

本文介绍如何利用 localstorage 在用户刷新页面后仍保持暗色模式（dark mode）的切换状态，通过优化 jquery 事件绑定与数据读写逻辑，确保主题类名和复选框状态准确还原。

要实现“页面刷新后仍保留暗色模式”这一功能，核心在于两点：状态的持久化存储与页面加载时的状态还原。原代码虽在复选框变更时正确写入 localStorage，却遗漏了最关键的一步——在页面初次加载（$(document).ready）时从 localStorage 中读取并应用已保存的主题状态。

以下是一个结构清晰、健壮可靠的解决方案：

jQuery 1.12.4

jQuery 1.12.4是jQuery 1.x系列的最后一个正式稳定版本，由jQuery团队于2016年发布。该版本主要面向需要兼容旧版浏览器环境的网站和Web应用，尤其适用于仍需支持Internet Explorer 6、Internet Explorer 7、Internet Explorer 8等老旧浏览器的项目。

下载

✅ 正确实现步骤

定义统一主题配置对象（避免重复硬编码）
页面加载时立即读取并应用主题（关键修复点）
变更事件中仅处理存取与 DOM 更新，逻辑解耦、无冗余操作
使用 .prop() 而非 .attr() 操作复选框状态（语义更准确）

✅ 优化后的完整代码

<div class="container">
  <label for="check">change theme: </label>
  <input type="checkbox" name="" id="check" class="checkbox">
</div>

let themeConfig = {
  "night_details": "dark-mode-container",
  "night": "dark-mode-body"
};

jQuery($ => {
  const $body = $('body');
  const $container = $('.container');
  const $check = $('#check');

  // ? 页面加载时：读取并应用已保存的主题
  const savedTheme = JSON.parse(localStorage.getItem('night-theme') || '{}');
  if (savedTheme.night && savedTheme.night_details) {
    $body.addClass(savedTheme.night);
    $container.addClass(savedTheme.night_details);
    $check.prop('checked', true);
  }

  // ? 用户交互时：更新状态与存储
  $check.on('change', function() {
    if (this.checked) {
      localStorage.setItem('night-theme', JSON.stringify(themeConfig));
      $body.addClass(themeConfig.night);
      $container.addClass(themeConfig.night_details);
    } else {
      localStorage.removeItem('night-theme'); // 推荐用 removeItem 而非 clear()
      $body.removeClass(themeConfig.night);
      $container.removeClass(themeConfig.night_details);
    }
  });
});

⚠️ 注意事项与最佳实践

localStorage.removeItem('key') 优于 localStorage.clear()：后者会清空全部本地存储，存在误伤风险；应精准移除目标键。
避免重复解析/序列化：将 JSON.parse() 和 JSON.stringify() 结果缓存为变量，提升性能并增强可读性。
$.isEmptyObject() 非必需：直接判断 savedTheme.night 属性是否存在更轻量、语义更明确。
CSS 类名建议语义化：如 dark-mode-body、dark-mode-container，便于维护与调试，避免使用 "body"、"div" 等易混淆的值（原代码中 "night": "body" 实际是类名而非标签名，易引发误解）。
兼容性提示：localStorage 在所有现代浏览器中均受支持，但需确保页面运行于 http:// 或 https:// 协议下（file:// 协议下不可用）。