可直接用 localStorage 记录侧边栏展开状态，页面加载时读取并设置 class，点击时切换 class 并更新 storage，配合 CSS transition 实现动画，多标签页可通过 storage 事件同步状态。
可以直接用 localStorage 记录侧边栏的当前展开状态（比如 "expanded" 或 "collapsed"），页面加载时读取并应用，点击切换时更新存储。关键在于状态同步和 DOM 操作时机。
1. 初始化时读取并设置侧边栏状态
页面加载后立即检查 localStorage 中是否有保存的状态值，有则按该值设置侧边栏类名或样式；没有则使用默认状态（如展开）。
- 推荐用一个统一的键名，例如
"sidebarState" - 用
dataset或 class 控制显示逻辑，比如添加class="collapsed"触发 CSS 过渡 - 示例代码：
document.addEventListener('DOMContentLoaded', () => {
const sidebar = document.getElementById('sidebar');
const savedState = localStorage.getItem('sidebarState');
if (savedState === 'collapsed') {
sidebar.classList.add('collapsed');
} else {
sidebar.classList.remove('collapsed'); // 确保默认展开
}
});
2. 点击按钮时切换状态并保存到 LocalStorage
为收起/展开按钮（或侧边栏标题区域）绑定点击事件，在切换 DOM 状态的同时，把新状态写入 localStorage。
- 建议统一管理状态变量，避免 class 和 storage 值不一致
- 可封装一个
toggleSidebar()函数，内部完成 DOM 更新 + 存储写入 - 示例：
const toggleBtn = document.getElementById('toggle-sidebar');
toggleBtn.addEventListener('click', () => {
const sidebar = document.getElementById('sidebar');
if (sidebar.classList.contains('collapsed')) {
sidebar.classList.remove('collapsed');
localStorage.setItem('sidebarState', 'expanded');
} else {
sidebar.classList.add('collapsed');
localStorage.setItem('sidebarState', 'collapsed');
}
});
3. 配合 CSS 实现平滑收起/展开效果
localStorage 只存状态，视觉变化靠 CSS。用 max-height、width 或 transform 配合 transition 实现动画。
立即学习“前端免费学习笔记（深入）”；
- 例如：默认
width: 260px;，.collapsed下设为width: 60px;并加transition: width 0.3s ease; - 若需隐藏文字，可用
overflow: hidden+white-space: nowrap配合宽度变化 - 注意：不要仅依赖
display: none，它无法过渡，应优先用visibility+opacity或尺寸控制
4. 可选：监听 storage 变化（多标签页同步）
如果用户在多个标签页打开同一站点，一个页面修改了侧边栏状态，其他页面也可响应更新。
- 监听
window的storage事件 - 检查
event.key === 'sidebarState'后重新应用状态 - 示例：
window.addEventListener('storage', (e) => {
if (e.key === 'sidebarState') {
const sidebar = document.getElementById('sidebar');
if (e.newValue === 'collapsed') {
sidebar.classList.add('collapsed');
} else {
sidebar.classList.remove('collapsed');
}
}
});
