如何在Local Storage中保存侧边栏折叠状态？

问题原因分析 #

你当前的代码存在两个核心问题：

1. 点击事件逻辑颠倒：按钮本身通过data-class和data-target属性（CoreUI框架内置逻辑）会切换侧边栏的类，但你的代码是根据切换前的状态保存值，导致存储的状态和实际DOM状态相反。
2. 未同步品牌区域显示：侧边栏折叠/展开时，maximized和minimized品牌区块的显示状态没有和侧边栏状态同步。

修正后的完整实现 #

HTML（无需修改） #

<div id="sidebar"
    class="c-sidebar c-sidebar-dark c-sidebar-fixed c-sidebar-sm-show sidebar" >
  <button id="header-toggler" 
      class="c-sidebar-minimizer c-class-toggler header-toggler" 
      type="button" data-target="_parent" data-class="c-sidebar-minimized">
  </button>
  <div class="c-sidebar-brand maximized">
    <img style="max-width: 100px;" 
        src="{{asset('images/brand/logo-text-white.png') }}" alt="GhoCalls Logo">
  </div>
  <div class="c-sidebar-brand minimized">
    <img style="max-width: 56px;" 
        class="p-1" src="{{asset('images/brand/logo-white.png') }}" 
        alt="GhoCalls Logo">
  </div>
  <ul class="c-sidebar-nav">
    <li class="c-sidebar-nav-item">
      <a class="c-sidebar-nav-link" href="#">
        <div class="mr-4 icon">
          <i class="fas fa-tachometer-alt"></i>
        </div>
        Dashboard
      </a>
    </li>
  </ul>
</div>

JavaScript（修正逻辑） #

const sidebarArea = document.getElementById("sidebar");
const headerToggle = document.getElementById("header-toggler");
const maximizedBrand = document.querySelector(".c-sidebar-brand.maximized");
const minimizedBrand = document.querySelector(".c-sidebar-brand.minimized");

// 页面加载时恢复保存的状态
const savedCollapsedState = localStorage.getItem("collapsed");
if (savedCollapsedState === "true") {
  sidebarArea.classList.add("c-sidebar-minimized");
  maximizedBrand.style.display = "none";
  minimizedBrand.style.display = "block";
} else {
  sidebarArea.classList.remove("c-sidebar-minimized");
  maximizedBrand.style.display = "block";
  minimizedBrand.style.display = "none";
}

// 点击按钮时切换状态并保存
headerToggle.addEventListener("click", function() {
  // 切换侧边栏折叠类，获取切换后的状态
  const isCollapsed = sidebarArea.classList.toggle("c-sidebar-minimized");
  // 同步切换品牌区块显示
  maximizedBrand.style.display = isCollapsed ? "none" : "block";
  minimizedBrand.style.display = isCollapsed ? "block" : "none";
  // 将状态存入localStorage
  localStorage.setItem("collapsed", isCollapsed.toString());
});

关键改进点 #

• 状态同步修正：使用classList.toggle()直接切换类，同时获取切换后的状态，确保存储值和实际DOM状态完全一致。
• UI一致性处理：折叠/展开侧边栏时同步切换两个品牌图片的显示状态，避免UI错乱。
• 初始化逻辑简化：直接根据localStorage的存储值设置初始状态，逻辑清晰无歧义。

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