0

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.

ArthurJ
  • 777
  • 1
  • 14
  • 39
  • the only way to persist data in the front end is either cookies or `localStorage` the later of which is most appropriate for this. You certainly **CANNOT** hide data in the front end unless you encrypt it with a key that is stored on the server (and that comes with a lot of caveats). Assume everything on the front end is completely and utterly visible by your user. – Dominik Jul 20 '21 at 05:54
  • Why would you need to hide that data? It's already on the client side, your users have access to it regardless of whether or not it's in localstorage. – Joel Rummel Jul 20 '21 at 05:54
  • @Dominik the data that I am looking at hiding is sensitive. apart from localstorage, is there another means of persisting this data after page refreshes without going to the server and also not being able to be changed by the user? – ArthurJ Jul 20 '21 at 06:01
  • @ArthurJ no there is not. If the data is on the front end it is always accessible and open. Like Joel said: if it's there in the first place it's compromised – Dominik Jul 20 '21 at 06:01
  • @Dominik - could you please suggest a solution for this that would be considered good practice? – ArthurJ Jul 20 '21 at 06:05
  • 1
    If the data is sensitive it should **NOT** be stored in the front end. That's my solution and considered good practice – Dominik Jul 20 '21 at 06:06

1 Answers1

0

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.

Joel Rummel
  • 802
  • 5
  • 18