How to maintain the page state when browser back button is clicked?

Question

I have a page with Client side paggination and Filtration. The page lists around 200-300 prouducts. The page contains some filters like Category,Manufacturer and Weight. Clicking upon any of the page number or filter, I am manupulating the page content on client side using Jquery.

Everything is working fine till this step. Now there is a usecase where I am facing problem.

1. Lets say a user comes to our product listing page and click on some of the filters and gets a list of products.
2. Now he clicks on a particular product , which redirects him to the product page to view the details of the product.
3. But now when the user clicks on the back button , the user gets the page with the intial state without any filter selected.

Is there any way user will get the page with the filters previously selected on clicking the back button?

Answer 1

You can use some of the following to store data across multiple pages.

1. Store data in cookies.
2. Store data in local storage.
3. Store data in the session on the server.
4. Make the data part of your URL (use hash or query string for the filter parameters). Note that changing query string causes page reload.

If using cookies, local storage, or hash, you'll need to add JavaScript code to your page that loads and applies the stored data on page load.