Browser Back button changes dynamic url Parameters

Question

I am working on a website, where url parameter gets updated based on user action, according to which I update the webpage without refreshing. Consider the scenario of E-commerce where url changes when user clicks on filters and then updated products gets displayed.

Now the problem is, when user clicks on Browsers's back button the browser goes back to previous url-parameter, but page did not gets changed. I want to change the page also based on url parameter that gets changed after back button clicked.

I have tried this solution:

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

The problem with this code is, this gets fired as url changes, means it does not care about if browser back button is clicked, or url is changing using the jQuery. So if I am changing url based on user interaction, the popstate callback will be called and my custom function also. To update the page I am using https requests, so http api gets called two times.

Is there any way to check if only "Back button" is clicked?

Isolated

This might be helpful: #18212484 – Morgan

Thanks, but that is for jquery mobile. I am not using jQuery Mobile (I wish I could :) ) – Isolated

Answer 1

I would recommend you to change your design a litle bit and trigger all content updates (the product list in your case) by listening to url changes, not only url changes caused by the back button. So instead of triggering any re-rendering on click events, let these buttons be regular link to the url that represent your content and trigger the functionality from the popstate event.

This is how all MVVM-frameworks like Angular.js, Backbone etc are designed and meant to be used.

By doing this it will also be so much easier for you to maintain the application in the long run.

Good luck!

Superclass

For perhaps an even better answer provide a simple example of code to do this (without using a library even since you placed this as a more generic answer) – Doing

Answer 2

You can do this with sessionStorage! Below is the relevant part of an answer I always refer to for stuff like this https://stackoverflow.com/a/45408832

sessionStorage is a storage type like localStorage but it only saves your data for the current tab.

---

Session storage can be used like this.

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

---

performance.navigation.type is the browser is the variable that hold users navigation info.

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

So to put it all together, you can set/update a sessionStorage item as part of the callback of the click event for your filter, then performance.navigation.type to check if they used the back button to load the page and apply the data!

Koblas

As long as you don't store any sensitive information in sessionStorage and expose an XSS attack vector – Doing