I have an Angular 7 app with plenty of screens (components) that display a grid of records. I would like to setup these screens so that when a user clicks on a record (visiting another screen) then clicking Back, they see the same filters, sort order, and scroll position.
I have experience doing this in a non-SPA app that uses the same grid library that I'm using in my Angular app (Datatables.net). I know how to get, set, and stringify the data I need. In the non-SPA app I simply persisted the data using window.location.replace into the hash portion of the URL.
My question is: what is the best way to approach this in a modern, Angular 6 app? Possible answers seem to include:
- HTML 5 History API
- The old window.location API, as mentioned above.
- Angular's Location API
- sessionStorage or localStorage as was suggested here but downvoted for reasons I'm not clear on...
- Possibly something via the Routing & Navigation tooling in Angular that I've overlooked?
Obviously that's a lot of choices. What's the best approach?
I found a lot of similar questions asked on SO, but I couldn't find a single one where the answers weren't extremely specific to the use case.
One factor that will affect which answers do/don't work is that I think I'll only want this behavior if the users clicks back but not if they revisit the same screen via the main nav. So if they click "Orders" in the main nav, it should default to the normal order, no filters, and be scrolled to the top. Trying to use localStorage, for example, seems easy except that I have no idea how I'd tell if a user clicked the main nav or clicked Back.
