如何使用sessionStorage保存表单提交状态，刷新后保持感谢信息禁止重复提交

实现方案 #

sessionStorage是浏览器自带的会话级存储，仅在当前浏览器标签页存活期间有效，关闭标签/浏览器后存储的数据会自动清空，完全匹配你需要的「关闭浏览器就允许重新提交」的需求，实现逻辑如下：

第一步：调整JS逻辑

你需要补充两个逻辑：提交时写入提交状态标记、页面加载时主动检查状态：

// 页面加载完成后立即检查是否已经提交过表单
window.addEventListener('load', function() {
  const isFormSubmitted = sessionStorage.getItem('formSubmitted');
  if (isFormSubmitted === 'true') {
    // 已经提交过，直接隐藏表单、显示感谢语
    document.getElementById('form').style.display = 'none';
    document.getElementById('thanks').style.display = 'block';
  }
})

function change() {
  document.getElementById('form').style.display ='none';
  document.getElementById('thanks').style.display = 'block';
  // 提交成功后写入提交标记到sessionStorage
  sessionStorage.setItem('formSubmitted', 'true');
}

第二步：修复现有HTML的问题

你当前代码里两个按钮都用了相同的id="button"，ID属性在页面中必须唯一，建议修改避免潜在样式、交互异常：

<button type="submit"  id="submit-btn" onclick="change()">Send</button>
<input type="reset" id="reset-btn">
</form>
</div>
<h1 id="thanks" style="display:none">Thanks for submit the form!</h1>

注意事项

如果你的表单是默认同步提交（提交后会触发页面刷新/跳转），确保提交后返回的页面也加载了上述的状态检查逻辑，刷新后状态才会正常生效。如果需要手动重置提交状态，调用sessionStorage.removeItem('formSubmitted')即可清除标记。

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