本文介绍如何使用 localstorage 持久化网页侧边栏的折叠/展开状态，确保用户操作后刷新页面仍保持原状，重点解决因 dom 类名未同步更新导致状态保存失效的问题。
本文介绍如何使用 localstorage 持久化网页侧边栏的折叠/展开状态，确保用户操作后刷新页面仍保持原状，重点解决因 dom 类名未同步更新导致状态保存失效的问题。
在构建管理后台或仪表盘类应用时，侧边栏的折叠状态（collapsed / expanded）是常见的用户偏好设置。若仅依赖 JavaScript 临时切换 c-sidebar-minimized 类而未同步更新 UI 状态，localStorage 将无法正确记录真实状态——这正是原始代码的核心缺陷：点击事件中只读取类名判断，却未实际切换类名，导致条件判断恒为真或假，localStorage 始终写入错误值。
正确实现步骤
- 初始化阶段：页面加载时，从 localStorage 读取 "collapsed" 值，并据此设置侧边栏初始类名；
- 交互阶段：点击切换按钮时，先更新 DOM 类名（触发视觉变化），再基于最新状态写入 localStorage；
- 数据类型注意：localStorage 只支持字符串，建议统一用 "true" / "false" 字符串值，避免 JSON.stringify 的冗余开销。
以下是优化后的完整实现代码：
const sidebarArea = document.getElementById("sidebar");
const headerToggle = document.getElementById("header-toggler");
// 初始化：根据 localStorage 设置初始状态
if (localStorage.getItem("collapsed") === "true") {
sidebarArea.classList.add("c-sidebar-minimized");
} else {
sidebarArea.classList.remove("c-sidebar-minimized");
}
// 绑定点击事件：先更新 UI，再持久化状态
headerToggle.addEventListener("click", function () {
// ✅ 关键修复：立即切换类名，确保 DOM 状态与用户感知一致
sidebarArea.classList.toggle("c-sidebar-minimized");
// ✅ 基于最新 DOM 状态写入 localStorage
const isCollapsed = sidebarArea.classList.contains("c-sidebar-minimized");
localStorage.setItem("collapsed", String(isCollapsed)); // 自动转为 "true" 或 "false"
});注意事项与最佳实践
- 避免重复添加/移除类名：classList.toggle() 比手动 add()/remove() 更安全、简洁；
- 初始化时机：确保脚本在 DOM 加载完成后执行（如置于 DOMContentLoaded 事件中或 <script> 放在 </script>
