页面昼夜模式切换器优化：解决切换需刷新及代码冗余问题

嘿，我来帮你搞定这两个问题！咱们先拆解下当前代码的问题，再给出优化后的方案：

问题1：返回页面后模式需刷新才生效 #

这是因为页面从浏览器缓存加载时（比如后退返回），初始的localStorage读取代码不会重新执行。咱们可以通过监听pageshow事件，确保每次页面显示时都同步状态。

问题2：代码冗长重复 #

你现在的点击事件写了两次（一次存localStorage，一次改UI），完全可以把模式切换的逻辑抽成一个复用函数，避免重复代码。

优化后的完整代码 #

HTML（保持不变）

<div class="switcher">
  <p class="day active">Day</p>
  <p class="night">Night</p>
</div>

jQuery（精简+修复状态同步）

// 封装模式切换的核心函数
function setMode(mode) {
  // 更新localStorage
  localStorage.setItem('screenModeNightTokenState', mode);
  // 更新body的类
  $('body').removeClass('day night').addClass(mode);
  // 更新切换器的active状态
  $('.switcher p').removeClass('active');
  $(`.switcher .${mode}`).addClass('active');
}

// 页面加载/显示时同步状态
function syncMode() {
  const savedMode = localStorage.getItem('screenModeNightTokenState') || 'day'; // 默认day模式
  setMode(savedMode);
}

// DOM加载完成后初始化
$(function() {
  // 绑定点击事件
  $('.switcher p').click(function() {
    const mode = $(this).hasClass('day') ? 'day' : 'night';
    setMode(mode);
  });

  // 初始同步状态
  syncMode();

  // 监听页面显示事件，解决后退缓存不生效的问题
  $(window).on('pageshow', function() {
    syncMode();
  });
});

优化点说明 #

• 复用核心逻辑：把设置模式的操作都放到setMode函数里，不管是初始化还是点击切换，都调用这个函数，避免重复代码。
• 自动同步状态：syncMode函数负责从localStorage读取状态并应用，页面初始化和每次显示时（包括后退返回）都会执行，确保状态始终一致。
• 简化点击事件：给切换器的两个p标签统一绑定点击事件，通过判断当前元素的类来确定要切换到的模式，不用写两个单独的点击事件。
• 默认值处理：如果localStorage里没有保存的状态，默认使用day模式，避免首次加载时没有类的情况。

这样修改后，不管是切换模式，还是离开页面再返回，状态都会自动生效，不需要刷新页面，同时代码也精简了很多~

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