Persisting react state on page refreshes preferably on client side

Question

Within my React app and being new to React, I am using localstorage to store some specific data that I require for page refreshes together with useEffect() hook.

The only problem is that I would like to be able to hide this specific data, which I am assuming I can't or perhaps scramble the data in localstorage.

I basically need to persist state on page refreshes and unsure what the best approach is. The state that I require to maintain is all within the parent App.js component.

Can anyone pls assist with best practice.

Answer 1

See this question for ways to persist state across refreshes. Your current method of using localStorage sounds reasonable.

As for data visibility concerns: whether or not you store your data in localStorage, the fact that your frontend code has access to the data at all means that it is already compromised. "Scrambling" the data before inserting it into localStorage is not an effective security measure. If it is absolutely critical that the user doesn't see this data, then you need to make sure that your backend never sends it at all.