localStorage 记住侧边栏收起状态的核心是：一、页面加载时读取 "sidebarCollapsed" 值并设置 DOM 类；二、点击时切换 class 并保存新状态；三、监听 storage 事件实现多标签页同步；四、配合 CSS transition 实现平滑动画。
用 localStorage 记住侧边栏收起状态，核心就三点：页面加载时读取并还原、用户点击时更新并保存、多标签页间自动同步。不需要后端，纯前端就能实现跨刷新、跨会话的“记得你上次怎么操作”。
一、初始化时读取状态并设置 DOM
页面一打开，就得立刻检查用户之前选的是展开还是收起，并把对应样式加到侧边栏元素上。推荐统一用一个键名，比如 "sidebarCollapsed"：
- 值为
"true"表示已收起，给侧边栏添加class="collapsed" - 值为
"false"或不存在，就移除collapsed类（保持默认展开） - 注意 localStorage 只存字符串，判断时要用
=== "true"，不能直接当布尔值用
二、点击切换时同步更新 DOM 和存储
给收起/展开按钮（或侧边栏标题区域）绑定点击事件，每次点击都做两件事：
- 切换侧边栏元素的
collapsed类（用classList.toggle()最方便） - 把新状态写入 localStorage，例如：
localStorage.setItem("sidebarCollapsed", String(isCollapsed)) - 建议在保存前比对当前 DOM 状态和存储值，避免无意义的重复写入
三、支持多标签页实时同步
如果用户在另一个标签页里点了收起，当前页也该立刻响应——靠监听 storage 事件即可：
立即学习“前端免费学习笔记（深入）”；
- 在页面初始化后，用
window.addEventListener("storage", handler)监听 - 在回调中检查
event.key === "sidebarCollapsed"，再读取新值并更新 class - 注意：这个事件只在其他标签页修改 storage 时触发，当前页修改不会触发自己，所以很安全
四、配合 CSS 实现平滑收起动画
光有 class 不够，还得靠 CSS 控制视觉效果：
- 定义
.sidebar { transition: width 0.3s ease, margin-left 0.3s ease; } -
.sidebar.collapsed设置窄宽度（如width: 60px;）和收缩的主内容区留白 - 可选：用
max-height+overflow: hidden配合过渡，实现高度收起动画
