侧边栏折叠状态跨页面同步需通过localStorage持久化存储并在页面加载时读取应用，封装initSidebarState函数统一初始化，监听storage事件实现多标签页同步，登录用户可升级为服务端持久化。
侧边栏折叠状态跨页面同步，核心是把用户操作后的展开/折叠状态持久化存储，并在每个页面加载时读取并应用该状态。
使用 localStorage 保存和读取折叠状态
用户点击折叠按钮时，将当前状态（如 true 表示已折叠，false 表示展开）存入 localStorage；页面初始化时优先从 localStorage 读取，再设置侧边栏 DOM 的类名或样式。
- 保存状态：
localStorage.setItem('sidebarCollapsed', 'true') - 读取状态：
const isCollapsed = localStorage.getItem('sidebarCollapsed') === 'true' - 注意：localStorage 只支持字符串，需手动做类型转换
统一初始化逻辑，避免重复判断
将侧边栏状态初始化封装成一个函数（例如 initSidebarState()），在所有页面的 DOMContentLoaded 或 Vue/React 组件挂载时 调用。该函数负责：读取本地存储 → 设置侧边栏 DOM 元素的 class（如 collapsed）→ 触发对应 CSS 样式 → 同步控制主内容区域的 margin 或 width。
- 推荐给侧边栏容器添加 data 属性，如
data-sidebar="main"，便于 JS 精准选取 - 配合 CSS 使用
.sidebar.collapsed { width: 60px; }和过渡动画提升体验
监听全局折叠事件，保持多标签页状态一致
当用户在某个页面修改了折叠状态，其他已打开的同域页面不会自动响应。可通过 storage 事件 监听 localStorage 变化，在其他页面中同步更新 UI。
立即学习“前端免费学习笔记（深入）”；
- 在页面脚本中添加：
window.addEventListener('storage', e => { if (e.key === 'sidebarCollapsed') { updateSidebarUI(e.newValue === 'true'); } }); - 确保所有页面都注册该监听，才能实现真正意义上的“跨页面同步”
- 注意：该事件不会在触发修改的当前页面触发，仅作用于其他同源窗口
可选增强：结合服务端或 IndexedDB 做用户级持久化
如果需登录用户在不同设备间也同步侧边栏状态，localStorage 就不够用了。此时应将状态上报至后端接口（如 /api/user/ui-preferences），并在登录后拉取配置。轻量场景下也可考虑 IndexedDB 存储更结构化的 UI 偏好。
- 前端发送状态更新：
fetch('/api/user/sidebar-state', { method: 'POST', body: JSON.stringify({ collapsed: true }) }) - 首次加载时优先请求服务端配置，失败再降级使用 localStorage
- 对未登录用户，仍可用 localStorage 保证单设备体验
