Current situation:
User requests http://localhost/#!/list/789 (all products in category id = 789)
Server sends back index.jsp, AngularJS stuff in index.jsp runs, ngRoute sees "/#!/list/789", AngularJS gets the template, ProductListController runs, does a GET request, receives JSON formatted list of products
URL in browser's address bar changes to http://localhost/list/789
In this product list page, a user can filter the products in the page, e.g. show all products within this price range, show products that have this color, are of this brand etc, all done with JavaScript
The problem is if a user clicks on a product page e.g. localhost/show/89 and goes back by hitting the back button, they will see the product list page again but all their filters will be gone
Is it possible to somehow preserve a "state" so that when a user goes back, all their filters will be reapplied ?
I assume this has something to do with history pushState, but how do I do it in AngularJS, is it possible ?
I think it should be possible because in the current situation when the URL in the browser's address bar changes (from localhost/#!/list/789 to localhost/list/789), the browser doesn't issue any requests to the server
So as the user is applying filters, the URL can change to
localhost/#!/list/789?price=50-100&name=a or localhost/#!/list789#price:50-100,name=a, but no requests is sent to the server
User goes to a product page, hits back, they will arrive at localhost/#!/list/789?price=50-100&name=a instead of localhost/#!/list/789
How do I do this in AngularJS ?
I'm aware of these solutions:
- LocalStorage
- Cookies i.e. everytime user applies a filter, browser notifies server (Hey, user just applied price filter), server saves that in session
However, maintaining state in browser history is preferred, because as each filter is applied, a new URL is created, thus making the user able to undo each filter application
