如何用History API忽略页面刷新，优化返回按钮行为？

方法1：表单提交后替换当前历史记录 #

表单提交刷新页面后，用history.replaceState覆盖当前历史条目，避免新增记录。具体实现：

• 在PHP处理完表单请求返回页面B时，输出一段判断执行的JS：

  <?php if (isset($_POST['submit'])): ?>
  <script>
    // 用当前页面的基础路径替换当前历史记录，去掉URL参数
    history.replaceState(null, document.title, window.location.pathname);
  </script>
  <?php endif; ?>
  

  这样表单提交后的刷新不会新增历史条目，点击返回按钮直接回到最初的来源页。

方法2：用sessionStorage记录初始来源（适配多标签） #

利用sessionStorage的标签页隔离特性，在页面B首次加载时记录来源URL，返回时直接跳转：

• 页面B加载时的JS：

  // 仅首次进入时记录来源，刷新时不覆盖
  if (!sessionStorage.getItem('originReferrer')) {
    sessionStorage.setItem('originReferrer', document.referrer || window.location.pathname);
  }
  

• 修改返回按钮的点击逻辑：

  <a href="javascript:void(0)" onclick="goBackToOrigin()" class="btn btn-default pull-left" style="margin-right:10px;">Back</a>
  <script>
    function goBackToOrigin() {
      const originUrl = sessionStorage.getItem('originReferrer');
      if (originUrl) {
        window.location.href = originUrl;
        sessionStorage.removeItem('originReferrer');
      } else {
        history.go(-1);
      }
    }
  </script>
  

  不管页面B刷新多少次，返回按钮都会直接跳转到最初的来源页，多标签场景下互不干扰。

方法3：AJAX提交表单，避免页面刷新 #

把表单改成异步提交，彻底消除刷新带来的历史记录问题：

• 修改表单的提交事件：

  <form id="targetForm" method="post" action="your-submit-url.php">
    <!-- 表单字段 -->
    <button type="submit">提交</button>
  </form>
  <script>
    document.getElementById('targetForm').addEventListener('submit', function(e) {
      e.preventDefault();
      const formData = new FormData(this);
      fetch(this.action, {
        method: this.method,
        body: formData
      }).then(res => {
        // 提交成功后更新页面内容，比如显示提示、更新表单状态
        if (res.ok) {
          alert('提交成功');
        }
      }).catch(err => console.error('提交失败:', err));
    });
  </script>
  

  这种方式页面不会刷新，历史记录里始终只有进入页面B的条目，返回按钮一次点击即可回到来源页。

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