Single page application page refresh

Question

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?

I doubt you will need localstorage or cookies as the page refresh would fetch the data again from the backend service. Can you elaborate why you think you need to store any data client side? (apart from the session token etc., which should be managed out of the box) — Sid, Nov 12 '17 at 17:24
I agree too. Persistent data should be tracked on the data tier (database). If that’s not possible, track data client-side and manage the complexity that comes with synchronization. Avoid session state which can limit scalability on the web server. — Michael Kang, Nov 12 '17 at 17:34

Mr. Aniket · Answer 1 · 2017-11-12T17:21:50.573

0

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

edited Nov 12 '17 at 17:21

answered Nov 12 '17 at 17:16

Mr. Aniket

83
11

Note that angular.js ≠ Angular. Afaik, session variable is a PHP concept which can't be assumed to be used here. Also, as other have pointed out, it's possible to store data in the url to some degree. – ShamPooSham Aug 31 '21 at 06:22

score 0 · Answer 2 · answered Nov 12 '17 at 17:20

0

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

answered Nov 12 '17 at 17:20

Jyotiraditya Parmar

116
6

score 0 · Answer 3 · answered Nov 12 '17 at 17:27

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.

score 0 · Answer 4 · answered Jul 30 '21 at 11:27

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.

Single page application page refresh

4 Answers4