Javascript 如何使本地html页面在重新加载时保持当前可隐藏部分的打开状态

要执行所需的操作，您需要在页面加载之间的某个位置存储页面状态.LocalStorage将是实现这一目标的理想场所.以下是如何实现这一点的一个示例.

请注意，它在单击按钮时设置本地存储键，在单击Clear按钮时删除该键，并且还在页面首次加载时从本地存储中读取，以便显示最后显示的内容.

<button class="section-toggle" data-page="1">First Section</button>
<button class="section-toggle" data-page="2">Second Section</button>
<button class="hide-sections">Hide All Sections</button>

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

const sections = document.querySelectorAll('.tabcontent');

const showContent = id => {
  sections.forEach(section => section.style.display = section.id == id ? 'block' : 'none');
  localStorage.setItem('page', id);
}

// show on click
document.querySelectorAll('.section-toggle').forEach(button => {
  button.addEventListener('click', e => showContent(e.target.dataset.page));
});

// clear all on click
document.querySelector('.hide-sections').addEventListener('click', () => showContent());

// show on load
showContent(localStorage.getItem('page') || '');

.tabcontent {
  display: none;
}

这里有一个jsFiddle中的工作示例，因为代码片段被沙箱保护并拒绝访问本地存储.