通过 localstorage 或 css 类控制侧边栏的折叠状态，结合点击事件持久化用户偏好，可实现页面刷新后侧边栏仍保持上次操作后的展开/折叠状态。
通过 localstorage 或 css 类控制侧边栏的折叠状态，结合点击事件持久化用户偏好，可实现页面刷新后侧边栏仍保持上次操作后的展开/折叠状态。
要让侧边栏在页面刷新或跳转后持续记住用户的折叠/展开状态，仅靠 sidebar.classList.add('hide') 设置默认隐藏是不够的——它只能确保首次加载时隐藏，但无法“记忆”用户后续的手动切换行为。真正健壮的解决方案需借助浏览器的 localStorage 持久化存储状态。
以下是完整、推荐的实现步骤：
✅ 1. 初始化：从 localStorage 读取状态
在 DOM 加载完成后（如 DOMContentLoaded 中），检查 localStorage 是否已保存侧边栏状态，并据此设置初始样式：
document.addEventListener('DOMContentLoaded', () => {
const sidebar = document.getElementById('sidebar');
const savedState = localStorage.getItem('sidebarCollapsed');
if (savedState === 'true') {
sidebar.classList.add('hide');
updateDividersAndDropdowns(true); // 隐藏时统一处理 divider 和下拉菜单
} else {
sidebar.classList.remove('hide');
updateDividersAndDropdowns(false);
}
});✅ 2. 封装状态同步逻辑（复用性强）
避免重复代码，将 divider 文本与下拉菜单重置逻辑提取为函数：
function updateDividersAndDropdowns(isCollapsed) {
const allSideDivider = document.querySelectorAll('#sidebar .divider');
const allDropdown = document.querySelectorAll('#sidebar .dropdown'); // 确保选择器准确
if (isCollapsed) {
allSideDivider.forEach(item => item.textContent = '-');
allDropdown.forEach(item => {
const a = item.parentElement.querySelector('a:first-child');
a?.classList.remove('active');
item.classList.remove('show');
});
} else {
allSideDivider.forEach(item => {
item.textContent = item.dataset.text || '';
});
}
}✅ 3. 绑定切换事件并持久化状态
为折叠按钮添加点击监听，并在每次切换后写入 localStorage：
const toggleSidebar = document.querySelector('nav .toggle-sidebar');
if (toggleSidebar) {
toggleSidebar.addEventListener('click', function () {
const sidebar = document.getElementById('sidebar');
const isNowCollapsed = !sidebar.classList.contains('hide');
sidebar.classList.toggle('hide');
updateDividersAndDropdowns(isNowCollapsed);
// ✅ 关键：持久化当前状态
localStorage.setItem('sidebarCollapsed', isNowCollapsed);
});
}⚠️ 注意事项
- 确保
#sidebar元素存在且toggle-sidebar按钮位于<nav></nav>内，否则querySelector可能返回null，需加空值判断； - 若项目使用服务端路由（如多页应用），
localStorage是跨页面共享状态的理想选择；若为单页应用（SPA），也可配合路由守卫增强体验； -
dataset.text必须在 HTML 中正确定义，例如：<div class="divider" data-text="•">•</div>； - 如需支持“全局默认状态”（如首次访问用户偏好），可在
savedState === null时设定默认值（如false表示默认展开）。
通过以上三步，侧边栏不仅能在首次加载时按需隐藏，更能智能记住用户每一次折叠/展开操作，并在刷新、返回、甚至关闭标签页后重新打开时精准还原——真正实现「所见即所记」的用户体验。
