CODEWITHSUNDEEP
angularlocal-storagesession-storage
Freddy Bonda
Freddy Bonda

Reputation: 1259

Prevent data loss when refreshed/lost connection on Angular

In Angular when you refresh the page then you basically lose your whole app's progress & variables. What is the best way to prevent this loss?

I know of session/local storage, which is what we have been using most of the time. But I can't think that this is a good thing to use because:

In general I just have a gut feel that the use of local/session storage is something you should try and avoid as far as possible. So I was just wondering if anyone has any other solutions.

Upvotes: 1

Views: 1425

Answers (1)

Dhananjai Pai
Dhananjai Pai

Reputation: 6005

There are 4 major methods to store data on the client side

1) As URL params

You could store all the state required to render the page the way it should within the route. You are limited by the route manipulation logic and the size. Also, you can only store string and will have to serialize other data manually

2) In IndexedDB

Better than localStorage, actions are asynchronous. Harder to manipulate directly, but can use libraries that provide interface similar to localStorage

3) localStorage/sessionStorage

Simple key-value store. Easy to use and update. Synchronous and blocking API. Maximum size may depend on the browser. Can be used to store data. Consider encryption if storing sensitive data(though not recommended to begin with)

4) cookies

Only strings, limited size, will have to serialize data

All libraries you use would be essentially playing over these 4 available base structures. Best is a relative term. Unless you are syncing the data periodically with the server (like auto-save, say) and rehydrating UI on refresh with the server data, you have to choose based on the strategy and data

Upvotes: 2

Related Questions