如何实现侧边栏折叠后，刷新或跳转页面仍保持折叠状态？

你的现有代码缺少状态持久化逻辑，所以刷新/跳转页面后侧边栏会回到初始状态。要实现折叠状态的记忆，只需要借助localStorage保存侧边栏状态，页面加载时读取并恢复即可，具体步骤如下：

1. 点击切换时保存状态 #

修改侧边栏切换按钮的点击事件，每次切换后把当前状态（折叠/展开）存入本地存储：

document.querySelector('.toggle-sidebar').addEventListener('click', function() {
  const sidebar = document.querySelector('.sidebar'); // 替换成你实际的侧边栏选择器
  // 切换折叠类
  sidebar.classList.toggle('collapsed');
  // 保存状态到localStorage
  const isCollapsed = sidebar.classList.contains('collapsed');
  localStorage.setItem('sidebarCollapsed', isCollapsed);
  // 如果需要切换按钮图标（比如菜单变叉），可以在这里同步修改
  this.classList.toggle('bx-menu');
  this.classList.toggle('bx-x');
});

2. 页面加载时恢复状态 #

在页面初始化时读取本地存储的状态，自动应用到侧边栏：

document.addEventListener('DOMContentLoaded', function() {
  const sidebar = document.querySelector('.sidebar');
  const toggleBtn = document.querySelector('.toggle-sidebar');
  // 读取保存的状态，默认是展开状态（如果没有保存过）
  const isCollapsed = localStorage.getItem('sidebarCollapsed') === 'true';
  
  if (isCollapsed) {
    sidebar.classList.add('collapsed');
    // 同步按钮图标状态
    toggleBtn.classList.remove('bx-menu');
    toggleBtn.classList.add('bx-x');
  }
});

注意事项 #

• 确保你的侧边栏折叠效果是通过添加/移除某个CSS类（比如示例中的collapsed）实现的，替换代码中对应的选择器和类名即可适配你的现有代码。
• localStorage会在用户浏览器中持久保存状态，除非用户手动清除浏览器缓存，否则状态会一直保留。

内容的提问来源于stack exchange，提问作者xmbohx