如何让侧边栏在刷新后保持折叠状态-html教程-PHP中文网

如何让侧边栏在刷新后保持折叠状态

通过 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 表示默认展开）。