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 es 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?

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 es 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?

• javascript
• jquery
• back-button

• store the state in a service, check for state when controller intitializes – charlietfl Commented Nov 24, 2014 at 13:19
• You are talking about breadcrumbs which can be done in backend part of application, but also u can use localStorage. Provide html of your filters for further help. – Strahinja Djurić Commented Nov 24, 2014 at 13:20
• what do you mean by "service" in this context? I would store the settings in cookies – Muleskinner Commented Nov 24, 2014 at 13:20

3 Answers 3

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.

There is a number of ways to do this:

1. If you are dealing with html5 history and a single-page application, then you are not reloading the page. But based on your question, I assume this is not what you are dealing with.
2. Store something in the URL. For an example of this, look at the filters on TotalHockey, e.g. http://www.totalhockey./Search.aspx?category_2=Sticks%2fComposite%20Sticks&chan_id=1&div_main_desc=Intermediate&category_1=Sticks so when you go backwards, the URL contains the entire state.
3. Use localstorage, if you have a browser that supports it.
4. use cookies with the $.cookie API
5. Store it on the session in the server.

You can store the Search Filter Data in session just after submitting on the filter input and on each ajax request (Loading your product listing), you can check the search filter inputs stored in the session and show the data according to them. If search session is empty then show whole listing.

You can also store the full ajax request URL (if GET method is used) in the session after searching the record and hit that particular URL again after ing back from product detail page.