如何在多步骤表单首次点击提交按钮后永久隐藏指定div元素

现有代码仅在点击按钮时临时修改DOM样式，多步骤表单切换步骤时会触发页面重载或DOM重新渲染，临时样式修改会被重置，因此无法跨步骤生效。

调整后的JS代码 #

// 页面加载完成后先判断隐藏状态
document.addEventListener('DOMContentLoaded', () => {
  const elementToHide = document.querySelector("#hideOnSubmit");
  // 读取会话存储中的隐藏标记
  const needHide = sessionStorage.getItem('hideRememberBlock') === 'yes';

  // 存在标记直接隐藏元素
  if (needHide && elementToHide) {
    elementToHide.style.display = "none";
  }

  const submitBtn = document.querySelector("#toggle");
  if (submitBtn) {
    submitBtn.addEventListener("click", () => {
      if (elementToHide) {
        elementToHide.style.display = "none";
        // 将隐藏标记存入会话存储，仅当前浏览器标签页会话生效
        sessionStorage.setItem('hideRememberBlock', 'yes');
      }
    });
  }
})

方案说明 #

• 使用sessionStorage存储状态，仅在当前浏览器标签页的会话周期内有效，关闭标签页后自动清除，不会影响用户后续再次访问表单的正常显示
• 页面每次加载完成都会先校验状态，不管跳转到第几个步骤都能保持隐藏效果
• 如果是无刷新切换的单页多步骤表单，可以额外监听步骤切换事件，触发时重新校验一次存储状态即可
• 如果需要在用户提交完整表单、或主动返回表单首页时重置显示状态，在对应逻辑中添加sessionStorage.removeItem('hideRememberBlock')即可

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