如何保存与恢复Bootstrap 5 Offcanvas的显示/隐藏状态？

核心思路 #

利用浏览器的localStorage持久化保存Offcanvas的显示/隐藏状态，结合Bootstrap 5 Offcanvas的原生事件监听状态变化，页面初始化时读取存储的状态并自动恢复。如果需要针对登录用户跨设备同步状态，可配合PHP会话（$_SESSION）实现服务器端存储。

具体实现步骤 #

1. 给Offcanvas添加唯一标识 #

确保你的Offcanvas元素有明确的ID，方便JavaScript定位：

<!-- Offcanvas容器 -->
<div class="offcanvas offcanvas-end" id="php-toolbox" tabindex="-1" aria-labelledby="toolbox-title">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="toolbox-title">PHP工具箱</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="关闭"></button>
  </div>
  <div class="offcanvas-body">
    <!-- 工具箱内容 -->
  </div>
</div>

<!-- 触发按钮 -->
<button class="btn btn-secondary" type="button" data-bs-toggle="offcanvas" data-bs-target="#php-toolbox">
  打开工具箱
</button>

2. 基础版：用localStorage保存状态 #

这是最简便的方案，状态保存在用户本地浏览器中：

document.addEventListener('DOMContentLoaded', function() {
  // 初始化Offcanvas实例
  const offcanvasEl = document.getElementById('php-toolbox');
  const offcanvas = new bootstrap.Offcanvas(offcanvasEl);

  // 页面加载时读取保存的状态
  const savedState = localStorage.getItem('toolboxState');
  if (savedState === 'show') {
    offcanvas.show();
  }

  // 监听显示事件，保存状态
  offcanvasEl.addEventListener('show.bs.offcanvas', function() {
    localStorage.setItem('toolboxState', 'show');
  });

  // 监听隐藏事件，保存状态
  offcanvasEl.addEventListener('hide.bs.offcanvas', function() {
    localStorage.setItem('toolboxState', 'hide');
  });
});

3. 进阶版：结合PHP会话实现跨设备同步 #

如果需要让登录用户的状态在不同设备间同步，可以用PHP会话存储状态，配合AJAX更新：

PHP后端脚本（save-toolbox-state.php）

<?php
session_start();
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
  $state = $_POST['state'] ?? 'hide';
  $_SESSION['toolbox_state'] = $state;
  echo json_encode(['status' => 'ok']);
  exit;
}
?>

前端JavaScript修改

document.addEventListener('DOMContentLoaded', function() {
  const offcanvasEl = document.getElementById('php-toolbox');
  const offcanvas = new bootstrap.Offcanvas(offcanvasEl);

  // 从PHP会话读取初始状态
  const initialState = '<?php echo $_SESSION['toolbox_state'] ?? 'hide'; ?>';
  if (initialState === 'show') {
    offcanvas.show();
  }

  // 辅助函数：发送状态到PHP保存
  function syncStateToServer(state) {
    fetch('save-toolbox-state.php', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded',
      },
      body: `state=${state}`
    });
  }

  // 监听状态变化，同时更新本地存储和服务器会话
  offcanvasEl.addEventListener('show.bs.offcanvas', function() {
    localStorage.setItem('toolboxState', 'show');
    syncStateToServer('show');
  });

  offcanvasEl.addEventListener('hide.bs.offcanvas', function() {
    localStorage.setItem('toolboxState', 'hide');
    syncStateToServer('hide');
  });
});

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