侧边栏折叠状态跨页面同步需通过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 保证单设备体验

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！