Refreshing page lost data of API?

Question

hi everyone i am getting data from api in react and also storing token in my local storage but when i refresh the page my data of API lost but my token remain save in local storage. Now i don't want to lost my data on refresh my page

Answer 1

You could store your data in your localstorage aswell. But I don't see why you couldn't just go fetch your data once again. The less you store Client side, the better. Because everything stored client side can be altered by the client.

PS NegativeFriction Is having a great point on reading old data, in the comment.

Answer 2

You could store the data (user list in your case) in the local storage, but I would discourage you from doing that for the following reasons:

1. Local storage is limited and adding a user list will pollute that space for you.
2. Data like user list might need updating regularly. It is recommended that you get a fresh list every time.

Answer 3

Depending on how complex your app is you can use a state manager like Redux or you can simply store the data you need by converting it to a string and storing it away. Once your application refreshes fetch this string again from local storage and load it back into your components.

let myData = JSON.stringify(data)
localStorage.setItem('profile_data')

//on page reload
let storedData = JSON.parse(localStorage.getItem('profile_data'))

Have to agree with @Nicolas on refetching your data on client apps. If its stuff like user profile you are storing then it would be wise to fetch that data every-time a page refreshes.