Maintain application status at Angular 7

Question

I need to maintain the state of a component even after navigating from one route to another or after closing the application.

I have a component where displays the duration of a call and the information related to the service, the duration of the call must be always running even after navigating from one route to the other or else close the application and open again.

The duration and information of the service must be maintained until I finish the service.

How can I do this in Angular?

Answer 1

You can use the localStorage or sessionStorage to keep the data in the user’s browser. Obviously the data will only be available in that browser. Writing and reading is quite simple:

// Armazenar item
localStorage.setItem('key', 'value');

// Ler item
localStorage.getItem('key')

// Apagar item
localStorage.removeItem('key')

The data stored on localStorage, are kept in the browser until they are deleted. If you want to keep the data only for the current session, use the sessionStorage:

sessionStorage.setItem('key', 'value');

Read and delete methods are the same as in localStorage

To learn more than one search on the subject. A useful link can be this.