添加到浏览器历史记录而不更改当前 URL

如何解决添加到浏览器历史记录而不更改当前 URL

我有一个 3 步注册过程，其中每个步骤都使用 javascript 显示在页面上，而无需刷新页面。我现在要做的是添加对用户所在步骤的反向引用，这样如果他们点击浏览器的后退按钮，他们就不会丢失所有进度。

例如，当用户从第 2 步导航到第 3 步时，URL 保持在 www.example.com。然后用户单击浏览器后退按钮。 URL 现在应该是 www.example.com?step-2。

我想我会以某种方式需要使用 History API 来完成此操作，但是如果我使用 window.history.pushState(null,null,'www.example.com?step-2')，当前 URL也会改变。

如何在不更改当前 URL 的情况下完成添加到历史记录？

解决方法

如果您的目标是不更改 URL，但仍允许来回更改历史状态，最好的办法是利用窗口的 hashchange 事件侦听器。这当然会利用 URL 中的哈希引用，但基本 URL 不会改变：

function locationHashChanged() {
  if (location.hash === '#step-2') {
    // Do something here
  }
}

window.onhashchange = locationHashChanged;

有关这方面的更多信息，请参阅官方文档： https://developer.mozilla.org/en-US/docs/Web/API/Window/hashchange_event