如何通过sessionStorage切换布尔值实现深色模式状态持久化

问题说明 #

需要实现网站深色模式切换：点击按钮添加/移除CSS类，且页面刷新或跳转其他页面后，深色模式状态不会失效。尝试用sessionStorage实现持久化但未成功。

原代码存在的问题 #

1. sessionStorage.getItem()仅接受一个参数，原代码传入两个参数的写法错误
2. 两个连续的if语句会导致逻辑冲突——第一个if执行后修改了存储值，第二个if的条件随即满足，最终状态会被反复切换
3. 页面初始化时未读取sessionStorage状态，刷新后无法恢复之前的模式
4. 点击事件与onclick属性分离，易导致按钮文本与模式状态不一致

完整可行实现示例 #

HTML

<a href="#" class="darkmode-button" id="dmbutton">Dark Mode</a>

<div class="header-wrap">
  Testing toggle with session
</div>

CSS

.header-wrap {
  color: black;
  transition: all 0.3s ease; /* 添加过渡效果提升切换体验 */
}

.dark-header {
  color: white;
  background-color: black;
}

JavaScript（jQuery）

// 页面加载时恢复之前的深色模式状态
$(document).ready(function() {
  const isDarkMode = sessionStorage.getItem('darkmode') === 'true';
  if (isDarkMode) {
    $('.header-wrap').addClass('dark-header');
    $('#dmbutton').text('Light Mode');
  }

  // 绑定深色模式切换事件
  $('.darkmode-button').click(function(e) {
    e.preventDefault(); // 阻止锚点默认跳转行为
    const currentMode = sessionStorage.getItem('darkmode') === 'true';
    
    // 切换样式类
    $('.header-wrap').toggleClass('dark-header');
    // 更新存储状态
    sessionStorage.setItem('darkmode', !currentMode);
    // 切换按钮文本
    $(this).text(currentMode ? 'Dark Mode' : 'Light Mode');
  });
});

关键改进点 #

• 页面初始化时读取sessionStorage状态，自动恢复之前的模式样式与按钮文本
• 使用toggleClass简化类切换逻辑，避免冗余的条件判断
• 整合模式切换与按钮文本修改逻辑，确保状态完全同步
• 添加e.preventDefault()阻止锚点默认跳转行为

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