How do I save the state of the page when I click the Back to Back button?
I have a page page and filtering. The page lists about 200-300 prides. The page has some filters like Category, Manufacturer and Weight. By clicking on some page number or filter, I render the page content client side with JQuery.
Everything works fine up to this step. Now there is a problem that I am facing a problem.
- Let's say a user comes to our product listing page and clicks on some of the filters and gets a product listing.
- Now he clicks on a specific product, which redirects him to the product page to view the product details.
- But now, when the user clicks the back button, the user is presented with an internal state page with no filter selection.
Is there any way to get the page with the filters that were previously selected when you clicked the Back button?
source to share
You can use some of the following functions to store data across multiple pages.
- Store data in cookies .
- Store data in local storage .
- Store data in session on the server.
- Make some data part of your url (use hash or query string for filter parameters). Note that changing the query string causes the page to reload.
If you are using cookies, local storage, or hash, you need to add JavaScript code to your page that loads and applies the stored data when the page is loaded.
source to share
There are several ways to do this:
- If you are dealing with html5 history and single page application you are not reloading the page. But based on your question, I am guessing that this is not what you are dealing with.
- Store something in the url. As an example, consider filters on TotalHockey, for example. http://www.totalhockey.com/Search.aspx?category_2=Sticks%2fComposite%20Sticks&chan_id=1&div_main_desc=Intermediate&category_1=Sticks , so when you go back the url contains all the state.
- Use localstorage if you have a browser that supports it.
- use cookies with API $ .cookie.
- Save it in a session on the server.
source to share
You can save the search filter data in the session immediately after submitting the filter to the input and on every ajax request (loading the product list), you can check the search filter input saved in the session and show the data according to it. If the search session is empty, show the entire list.
You can also store the full ajax request url (if using the GET method) in the session after finding the entry, and click that particular url again after returning from the product detail page.
source to share