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

Posted 2023-02-22

【中文标题】浏览器后退按钮更改动态 url 参数

【英文标题】：Browser Back button changes dynamic url Parameters

【发布时间】：2016-01-22 15:14:25

【问题描述】：

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

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

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

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

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

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

【问题讨论】：

这可能会有所帮助：***.com/questions/18211984/…

谢谢，但那是 jquery mobile 的。我没有使用 jQuery Mobile（我希望我可以 :)）

【参考方案1】：

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

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

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

祝你好运！

【讨论】：

也许更好的答案提供了一个简单的代码示例来执行此操作（即使您将其作为更通用的答案，也无需使用库）

【参考方案2】：

您可以使用sessionStorage 做到这一点！以下是我经常参考的答案的相关部分https://***.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 检查他们是否使用后退按钮加载页面和应用数据！

【讨论】：

只要您不在sessionStorage中存储任何敏感信息并暴露XSS攻击向量