浏览器后退按钮更改动态 url 参数

Question

我正在开发一个网站，其中 url 参数根据用户操作进行更新，据此我更新网页而不刷新。 考虑一下电子商务场景，当用户点击过滤器时 url 会发生变化，然后会显示更新的产品。

现在的问题是，当用户点击浏览器的后退按钮时，浏览器会返回之前的 url 参数，但页面并没有改变。我还想根据单击后退按钮后更改的 url 参数更改页面。

我已经尝试过这个解决方案：

$($window).on('popstate', function (e) {
     // Update the page also
});

这段代码的问题是，它会在 url 更改时触发，这意味着它不关心是否单击了浏览器后退按钮，或者 url 是否正在使用 jQuery 更改。因此，如果我根据用户交互更改 url，popstate 回调将被调用，我的自定义函数也将被调用。为了更新我使用 https 请求的页面，所以 http api 被调用了两次。

有没有办法检查是否只点击了“返回按钮”？

Answer 1

我建议您稍微更改您的设计并通过监听 url 更改来触发所有内容更新（您的案例中的产品列表），而不仅仅是由后退按钮引起的 url 更改。因此，不要在点击事件上触发任何重新呈现，而是让这些按钮成为代表您的内容的 url 的常规链接，并从 popstate 事件触发功能。

这就是所有 MVVM 框架（如 Angular.js、Backbone 等）的设计和使用方式。

通过这样做，从长远来看，您也可以更轻松地维护应用程序。

祝你好运！

Answer 2

您可以使用sessionStorage 做到这一点！以下是我经常参考的答案的相关部分https://stackoverflow.com/a/45408832

sessionStorage 是一种类似于 localStorage 的存储类型，但它只保存当前选项卡的数据。

---

会话存储可以这样使用。

sessionStorage.setItem('key', 'value'); //saves the value
sessionStorage.getItem('key'); //gets the saved value

---

performance.navigation.type 是浏览器，是保存用户导航信息的变量。

if(performance.navigation.type == 2){
  //User is coming with back button
}

因此，总而言之，您可以设置/更新 sessionStorage 项目作为过滤器点击事件回调的一部分，然后 performance.navigation.type 检查他们是否使用后退按钮加载页面和应用数据！