如何让本地HTML页面刷新后保持当前展开的可隐藏区块状态？

我有一个本地HTML笔记页面，顶部设有按钮，点击可单独展开对应的隐藏区块。但更新内容后刷新页面时，所有区块都会恢复到默认的收起状态，导致找不到之前的位置。需要实现页面刷新后仍能保留当前状态，且无需额外按钮。

当前代码（存在刷新丢失状态的问题） #

HTML

/* Navigation menu */
<button onclick="openPage('1')">First Section</button>
<button onclick="openPage('2')">Second Section</button>
<button onclick="openPage('None')">Hide All Sections</button>

/* Sections of my notes */
<section id="1" class="tabcontent">
</section>

<section id="2" class="tabcontent">
</section>

CSS

.tabcontent {
    display: none; // Hides all sections by default
}

JavaScript

function openPage(pageName, elmnt) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none"; // Hide all other sections
  }
  document.getElementById(pageName).style.display = "block"; // Shows the section I specified
}

修改后的代码（实现状态保留） #

核心思路是利用浏览器的localStorage存储当前展开的区块ID，页面加载时自动读取并恢复状态。

HTML

<!-- 导航按钮 -->
<button onclick="openPage('1')">第一部分</button>
<button onclick="openPage('2')">第二部分</button>
<button onclick="openPage('None')">隐藏所有区块</button>

<!-- 笔记内容区块 -->
<section id="1" class="tabcontent">
  这里是第一部分的笔记内容
</section>

<section id="2" class="tabcontent">
  这里是第二部分的笔记内容
</section>

CSS

.tabcontent {
    display: none; /* 默认隐藏所有区块 */
}

JavaScript

// 页面加载完成后自动恢复之前的展开状态
window.onload = function() {
  const savedTab = localStorage.getItem('activeNoteTab');
  if (savedTab) {
    openPage(savedTab);
  }
}

function openPage(pageName) {
  const tabcontent = document.getElementsByClassName("tabcontent");
  
  // 先隐藏所有区块
  for (let i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }

  if (pageName !== 'None') {
    // 显示目标区块
    document.getElementById(pageName).style.display = "block";
    // 将当前展开的区块ID存入localStorage
    localStorage.setItem('activeNoteTab', pageName);
  } else {
    // 隐藏全部时清除存储的状态
    localStorage.removeItem('activeNoteTab');
  }
}

关键改动说明 #

• 新增window.onload事件：页面加载时从localStorage读取之前保存的区块ID，自动调用openPage恢复状态
• 调整openPage函数：点击显示区块时把ID存入localStorage；点击“隐藏所有”时清除存储的状态
• 移除了原函数中未使用的elmnt参数，简化代码逻辑

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