Keeping state of an angular app after using browser's back button - javascript

I made an angular app that makes the user able to search through an assortment of products. This application will run on a Drupal page. This all works fine.
When I click a product my intention is to open another static drupal page with a product detail directive in it. The product detail page will have the product id or alias in the url. If the product detail page opens the directive will load the product detail by the id in the URL.
Now when I user the browser's back button, the search results will be gone and the assortment browser will be in pristine state.
How can I keep the state? Is it wise to use sessionStorage?

You can use $rootScope(SPA applications) to maintain the state or you can use sessionStorage

Related

react router 5 browser back button changing state

In my application, I have a multi-page form that lives on the URL http://localhost:3000/form. When I change pages in the form, the URL remains the same, but the state changes to render different views (pages of the form).
A new feature I want to implement is to allow the browser back button to switch views/pages (aka change state) in the multi-page form.
Is this possible? How can I achieve this?
Why exactly do you want to keep the same route? If a user wants to get back to the same state they were at via a deep link they would not be able to with this implementation would they?
If you want to use the same route you can at least use # routes to keep track of where in the form the user is.
Eg.
http://localhost:3000/form#step1,
http://localhost:3000/form#step2
then the back button would work to move them back a step.

JS button to hit specific URL in browsing history

I'm working on an e-commerce site. I want to add a "continue shopping" button to the cart page, but the shop has multiple types of items. If they added fabric to their cart, it would take them back to the main fabric page, and if they added notions to the cart, it would take them back to the main notions page. The problem is, that while the main fabric and notions pages have "/fabric" and "/notions" in the URL, the products do not. So when I go to the fabric section, choose a print, the URL for the print won't say "/fabric" in the URL. And since there is a sidebar menu, I can't always guarantee that the main category page will be the 2nd page back in their history. Is there a way to generate a button that will search through their history and connect them to either "/fabric" or "/notions" depending on which they visited most recently?
Edit: I'm looking to do something like this: https://papathemes.com/bigcommerce-add-button-to-go-back-the-last-visited-category-page-on-shopping-cart/

About AngularJS pagination (I used localStorageService before but it wasn't the solution i wanted to apply)

First, Thank you for watching this question!
I'm newbie to angularJS and i'm trying to make pagination to be more flexible to use.
Below is my situation.
I made pagination function
It works as my intention
But, When i get into other page(leave list page which includes pagination function), and try to go back, the problem appears!
(Here is what i want to solve) I go back to list page by clicking backspace key or clicking back button on view. and the params i entered in list page is gone!
In multi page application, the url can be '/tt?aid=11&bid=22&cid=33', and i get into detail view page, and i can retrieve to '/tt?aid=11&bid=22&cid=33' by just clicking back button. but in angularjs, it goes back to list page with no params.
And below is what i tried to solve above problem.
I used local-storage-service
I used onPageUnload event(of browser)
I'm not sure if this best fits.
Store the page no.
When you click back to get that list, feed that page no.
page no can be stored in a scope variable.
Your pagination function should be able to give the list based on page no.

Storing page settings in Angular

I'm probably going to get knocked because this is more of an architecture question then a coding question and I haven't tried anything. I'm trying to decide WHAT to try ...
I have a web page with a list of user data in an ng-repeat. Also on the page is a radio group and a select input with filtering options for the data. All of that works fine.
If the user clicks on a link that is in the repeated user data, they "drill down" to a details page (this is NOT a SPA). What's the best way to set things up so that when they select "Back" to return to the listing page the values from the radio group and select are restored? Query params? Local Data storage? What's the best "Angular" approach?
The "Angular way" is to create Single Page Applications (SPAs) and use WebSockets. If you must be old-fashioned, try ngCookies.
https://docs.angularjs.org/api/ngCookies

How to handle pagination in Single Page Application?

On my Single Page Application (Javascript (AngularJs) webapp), I'm displaying a paginated items list.
I'm displaying 10 items per page.
In order to retain the current pagination opened by the user at any time while this one navigates on other page, I put the current page number on browser's localStorage.
Here's an example of workflow:
The user goes to myItemsList.html.
He opens the page 2 involving the url: myItemsList.html?page=2.
Then, he goes to another page: myOtherPage.html.
He goes back to the link initially pointing to myItemsList.html, that displays directly thanks to localStorage the page myItemsList.html?page=2 in order to potentially continue his navigation.
Would it confuse the user, maybe expecting to see the page 1 as a new starting navigation.
If I display at the top of the list, a kind of label like "Page 2" in order to warn him that he's seeing the preceding portion of his navigation, isn't it UX-friendly?
Or should I completely avoid persisting current pagination?
Here's what could happen if I don't persist the current viewed page:
The user goes to myItemsList.html.
He opens the page 2 involving the url: myItemsList.html?page=2
He opens an item in this page (the "show" page), leading to: myItemsList.html?id=123
He clicks on the browser's back button, causing a refresh of myItemsList.html (since a Single Page Application). The current pagination (page 2) would be lost and the user would need to restart it in order to continue its items discovery.
This seems really touchy...
What strategy should I choose for a use case like this?
saving the progress through navigation is the expected behavior in UX design of SPA, so maintaining the page he was in the correct choice, and since it is a pagination it won't be an issue even if the user wants to go back to any page, it will only take a click.
First of all I would avoid using localstorage and use a service instead to persist ur page counter.
Secondly u dont need to persist pg counter to anywhere else but in a scope variable for refreshing to mext page data. You can even think about just adding to results similar to infinitite scroll use cases. But either way, u can use local scope variable for pagination.
Whether to go directly to last viewed page - is a more business decision and will depend on needs.
But u can very easily persist or remove persisted data using broadcast and watch and decide on persistence based on event listened to.
Hope thos helps ...
How about maitaining a sort of heirerachy in JS like this :
Suppose a user navigates to a section called Customer Search
customer_search.customer_display.page = 2
Where customer_search is the a subsection , customer_display is the view with pagination you are targetting .
menu.menu_items.page=7
Where menu is the subsection , menu_items is the view with pagination
Might work if your application is organized in a reasonably hierarchical manner .
Probably you could also maintain the page in $scope for that particular controller .
The URL should dictate the navigation.
When I navigate to your website, e.g. example.com, I expect to be on the first page.
When I navigate to a (bookmarked) page of your website, e.g. example.com?page=2, I expect to be on the second page.
When I hit the back button, I expect to be presented with the previous page exactly as it was when I left it. You don't need to refresh the entire page, just listen to the history events and update accordingly.
And I strongly believe that this question doesn't belong to stackoverflow...

Categories

Resources