'Single page application page refresh

In Single page application like web application using Angular 2, we manage the navigation to different pages using routes. But when page is refreshed in browser then entire application is getting refreshed. This causes the data being lost (e.g. the values retrieved from service).

I know we can store the data in localstorage/cookies and use that data during loading of any route but is any better way to maintain the application data on page refresh or handling this kind of scenarios?



Solution 1:[1]

You can use localstorage, sessionstorage and Cache other than these api you can't store your data in browser.

There is one more way but it comes with security concern, If your data is small and does not confidential you can have it in URL.

Happy Coding

Solution 2:[2]

It is not possible to retain application data after refresh unless application does not used cookie or local storage! you can also used session variable to stored data but , it consume memory and slow down application,So, only stored important data in it! it will available in entire site! may be this solution solve your problem : Maintaining Session through Angular.js

Solution 3:[3]

You can use session to keep data about logging (for example), local storage or session storage to keep small important data, cookies and so on. But in many cases the best solution is to make call to API and get all necessary data from server on SPA start. If you didn't hear about resolvers yet, I recommend you to have a look at this: https://blog.thoughtram.io/angular/2016/10/10/resolving-route-data-in-angular-2.html. It prevents your SPA from rendering until all important data will be fetched, I really like to use it and I think that it's an important part of client-server interaction in Angular.

Solution 4:[4]

Another option could be serialization of the persisting object to json and put it into the url.

There is this function encodeURIComponent to encode a json object, which you can use to put it into the url.

Of corse this is not the most elegant way for doing it, but in theory you could persist the whole store and decode it afterwards, but be careful. This could open security issues to your application.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Jyotiraditya Parmar
Solution 2
Solution 3 Commercial Suicide
Solution 4 Ling Vu