跨静态HTML页面复选框控制元素显隐及状态持久化方案咨询

独立HTML页面之间的JavaScript运行上下文完全隔离，直接在一个页面通过ID获取其他页面的DOM元素必然无法生效。以下方案基于浏览器原生localStorage实现跨页面状态共享，不需要部署Web服务，直接在Chrome中打开本地HTML文件即可正常运行。

1. 复选框页状态持久化配置（修改01.algemeen.html） #

将以下脚本添加到01.algemeen.html的</body>闭合标签前即可，不需要修改现有复选框、导航栏的HTML代码：

<script>
// 获取页面上的Woonfunctie复选框
const targetCheckbox = document.getElementById('Woonfunctie');

// 页面加载时读取本地存储，自动恢复复选框勾选状态
const savedStatus = localStorage.getItem('woonfunctieToggle');
targetCheckbox.checked = savedStatus === 'true';

// 监听复选框状态变化，实时将状态写入本地存储
targetCheckbox.addEventListener('change', () => {
  localStorage.setItem('woonfunctieToggle', targetCheckbox.checked);
});
</script>

添加后，无论页面跳转、返回还是关闭浏览器重新打开，复选框的勾选状态都会自动保留，不会重置。

2. 其他页面元素显隐控制配置（修改03.hoofdstuk 3.html等受控页面） #

在所有需要控制元素显隐的页面（比如03.hoofdstuk 3.html、其他章节页）的</body>闭合标签前添加以下脚本，只需要把当前页面需要受控的元素ID填入数组即可：

<script>
// 数组内填入当前页面所有需要受复选框控制的元素ID，新增元素直接加ID即可
const controlledElements = ['3.8.0', '3.8.1'];
// 读取复选框的存储状态
const checkboxStatus = localStorage.getItem('woonfunctieToggle') === 'true';

controlledElements.forEach(elId => {
  const currentEl = document.getElementById(elId);
  if (!currentEl) return;
  // 复选框勾选时显示元素，取消勾选时隐藏，需要反转逻辑直接调换block和none即可
  currentEl.style.display = checkboxStatus ? 'block' : 'none';
});
</script>

以给出的3.8章节标题、段落为例，把ID填入数组后，页面加载时会自动根据复选框的存储状态控制元素显示/隐藏，跳转页面时不需要做额外传参。

使用说明 #

• 现有导航栏的a标签代码不需要做任何修改，原有跳转逻辑完全保留
• 如果需要给其他页面增加受控元素，只需要在对应页面的controlledElements数组中追加元素ID即可，不需要修改公共逻辑
• 不要在浏览器无痕模式下测试，无痕模式关闭页面后localStorage会自动清空，普通模式下状态会永久保存，直到手动清除浏览器缓存
• 如果需要调整显隐的匹配逻辑（比如勾选时隐藏指定内容），只需要修改脚本中display属性的判断分支即可

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