页面重载时如何恢复HTML details元素的展开/折叠状态？

要解决页面刷新或返回后details元素重置为折叠状态的问题，可以通过JavaScript结合localStorage来持久化存储每个details的展开状态，具体实现步骤如下：

1. 给details元素添加唯一标识 #

首先给每个details元素设置唯一的id，确保能精准区分不同元素的状态：

<details id="detail-25">
  <summary>25</summary>
  <ul>
    <li>100</li>
    <li>101</li>    
    <details id="detail-26">
      <summary>26</summary>
      <ul>
        <details id="detail-72">
          <summary>72</summary>
          <ul>
            <li>73</li>
          </ul>
        </details>
      </ul>
    </details>
    <li>27</li>
  </ul>
</details>

2. 编写状态持久化逻辑 #

通过JavaScript监听页面加载事件和details的切换事件，实现状态的保存与恢复：

// 页面加载完成后恢复状态
document.addEventListener('DOMContentLoaded', () => {
  const allDetails = document.querySelectorAll('details');

  // 恢复每个details的状态
  allDetails.forEach(detail => {
    const storedState = localStorage.getItem(`detail-state-${detail.id}`);
    if (storedState === 'true') {
      detail.open = true;
    }
  });

  // 监听状态变化，实时保存到localStorage
  allDetails.forEach(detail => {
    detail.addEventListener('toggle', () => {
      localStorage.setItem(`detail-state-${detail.id}`, detail.open.toString());
    });
  });
});

原理说明 #

• localStorage是浏览器提供的本地存储机制，能在页面关闭后保留数据，适合存储这类轻量的状态信息。
• 页面加载时，从localStorage读取每个details的历史状态，设置open属性恢复展开/折叠状态。
• 当用户切换details状态时，触发toggle事件，将当前状态更新到localStorage中。

如果不想手动添加id，也可以通过元素的层级结构、文本内容等生成唯一标识，但使用id是最直观且可靠的方式。

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