CODEWITHSUNDEEP
javascriptreactjscachinglocal-storage
catandmouse
catandmouse

Reputation: 11809

Updating localStorage when there's new data from server?

After logging into an app (React.js), I am caching the member data in localStorage as a lot of my components are using it and request only needs to be done upon log-in, ideally.

However, a few properties in this member object may be changed in the backend manually so the frontend doesn't have a way to know whether the member object has changed at all. (Again, ideally, any change to the member object should go through some form submission that directly changes the DB, with which an update can be triggered for the localStorage, but this is not an option at this time.)

Example scenario: There's a generic form in the app to request for additional credits. Customer service will receive an email regarding the request. Credits would be manually updated for Customer A (in DB). If Customer A doesn't re-login (where the get request for member is done), localStorage will still show the old no. of credits.

If this is the situation, what's the best way to go about it?

  1. Don't store member data in localStorage at all so as to keep the data fresh. Just call the endpoint whenever it's needed.

  2. Use sessionStorage instead?

  3. Trigger a refetch when the user refreshes the page / app (although user may not know that they need to do this to update the data).

Suggestions?

Upvotes: 1

Views: 2035

Answers (3)

Orio Ryo
Orio Ryo

Reputation: 188

If you do not know when member has been updated, don't store it. You should query the back end every time you need member. That is the only way to keep the data sync with your database.

Upvotes: 0

Jacob
Jacob

Reputation: 78890

At a high level, you have two choices:

  • Poll (periodically call the back end to refresh the data)
  • Open a persistent connection (like a web socket) to the server, and have the server push updates to clients.

The latter option would require a lot of changes, and it changes the scalability of your app, so the former choice seems like the most reasonable option for you.

It's smart to keep using localStorage so you have an offline copy of the data and aren't blocking rendering during page load; you can have a background periodic refresh process that doesn't disrupt the user in the meantime. If your data is mirrored in something like redux or context, then your UI could seemlessly update if/when the data changes.

Upvotes: 1

gabriel.hayes
gabriel.hayes

Reputation: 2313

  1. Calling the endpoint whenever its needed is ideal if the data is going to change based on things outside of the user's control.
  2. Session Storage is just local storage that gets wiped when the browsing session ends, you'll still have the exact same issue
  3. This doesn't really solve the problem, and it's typically a bad user experience to require the user to perform regular maintenance tasks in order to use your application to the best of its ability

I'd go with just getting the data fresh.

Upvotes: 1

Related Questions