如何实现侧边栏页面刷新/跳转后保持显示直至用户手动关闭

核心思路 #

用sessionStorage存储侧边栏开合状态，这个存储介质在同标签页的页面跳转、刷新过程中不会丢失数据，标签页关闭后自动清空，非常适合存这类临时UI状态。页面加载时自动读取存储值还原侧边栏状态，仅当用户手动触发关闭动作时才更新存储值为关闭。 #

实现步骤 #

1. 补全侧边栏显隐控制样式 #

如果你现有项目已经写了侧边栏的显隐样式，可以跳过这步，直接匹配你现有代码里控制侧边栏显示的类名即可。没有的话加下面的样式，放在全局样式或者页面对应的样式块里：

/* 仅移动端生效，断点可根据项目实际情况调整 */
@media (max-width: 767px) {
  .mobile-filter-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 280px;
    z-index: 999;
    background: #fff;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    overflow-y: auto;
    padding: 16px;
  }
  /* 侧边栏打开状态类 */
  .mobile-filter-sidebar.sidebar-open {
    transform: translateX(0);
  }
  /* 侧边栏遮罩层，可选，优化交互 */
  .sidebar-mask {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 998;
  }
  .sidebar-mask.show {
    display: block;
  }
}

在侧边栏同级位置加遮罩层DOM：

<div class="sidebar-mask" id="sidebarMask"></div>

2. 替换原有脚本逻辑 #

把你原来after_scripts块里的代码替换成下面的内容，注意把汉堡按钮的选择器换成你项目里实际的汉堡按钮选择器：

@section('after_scripts')
  @parent
  <script>
    var baseUrl = '{{ request()->url() }}';
    // 存储侧边栏状态的key
    const SIDEBAR_STATE_KEY = 'mobileFilterSidebarOpen';
    const sidebar = document.getElementById('sidebar');
    const sidebarMask = document.getElementById('sidebarMask');
    // 替换成你项目里实际的汉堡按钮选择器，比如#hamburger、.menu-toggle之类的
    const hamburgerBtn = document.querySelector('.mobile-filter-toggle');

    // 页面初始化时读取状态还原侧边栏
    function initSidebarState() {
      const isOpen = sessionStorage.getItem(SIDEBAR_STATE_KEY) === 'true';
      isOpen ? openSidebar(false) : closeSidebar(false);
    }

    // 打开侧边栏逻辑
    function openSidebar(saveState = true) {
      sidebar.classList.add('sidebar-open');
      sidebarMask?.classList.add('show');
      document.body.style.overflow = 'hidden';
      if (saveState) sessionStorage.setItem(SIDEBAR_STATE_KEY, 'true');
    }

    // 关闭侧边栏逻辑
    function closeSidebar(saveState = true) {
      sidebar.classList.remove('sidebar-open');
      sidebarMask?.classList.remove('show');
      document.body.style.overflow = '';
      if (saveState) sessionStorage.setItem(SIDEBAR_STATE_KEY, 'false');
    }

    // 绑定交互事件
    hamburgerBtn?.addEventListener('click', () => {
      sidebar.classList.contains('sidebar-open') ? closeSidebar() : openSidebar();
    });
    // 点击遮罩关闭侧边栏
    sidebarMask?.addEventListener('click', closeSidebar);
    // 如果你的侧边栏内置了关闭按钮，给按钮加click事件绑定closeSidebar()即可

    // DOM加载完成后初始化
    document.addEventListener('DOMContentLoaded', initSidebarState);
  </script>
@endsection

说明 #

• 现有表单的自动提交逻辑不需要做任何修改，GET跳转、页面刷新都不会清空同标签页的sessionStorage，重载后会自动还原侧边栏状态
• 只有用户主动触发关闭动作（点击汉堡按钮收起、点击遮罩、点击侧边栏关闭按钮）时，才会把存储状态改成关闭，完全符合预期交互
• 如果需要跨标签页、长期记住用户的侧边栏开合偏好，把sessionStorage换成localStorage即可，对于筛选场景用sessionStorage更合理，用户关闭标签页后状态自动重置，不会下次打开页面还弹出侧边栏

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