REACT state from local storage not loading

Question

Fair warning, I am newbie REACT developer. I am coming from .NET world. I have taken week long training courses on Pluralsight and built some simple demo apps. I am posting this question after several days of google searches and reading numerous articles. I dont have any other REACT devs on our team, so I am kind of stuck and hoping the community here can help me out?

Currently at work I am building a REACT web app that has several pieces of functionality. The app is a web app to demo OAUTH flows with Azure B2C. I have multiple buttons on my app that demonstrate implicit flow, auth flow, refresh token etc. When each of these buttons are clicked the user is redirected to the OAUTH endpoints for login etc. Thus the user is redirected away from my REACT app. In order to store some of the choices the user made on the form and to hold onto the OAUTH token and other values, I am storing values in REACT state.

this.state = {
  fieldName1: localStorage.getItem("FieldName1"),
  fieldName2: localStorage.getItem("FieldName2"),
  fieldName3: localStorage.getItem("FieldName3"),
  fieldName4: localStorage.getItem("FieldName4"),
  fieldName5: localStorage.getItem("FieldName5"),
};

As you can imagine once the redirection happens away from my REACT app the state values are lost. So I looked into using cookies. I then came across some articles on using local storage. That is currently what I have in my code. My issue comes in when the user is redirected back to my app I am unable to reload values from state. When I run the app in Chrome and I look at the dev tools panel and look at my local storage, all five of my values are present. However, all five of my state values are NOT getting reloaded, from local storage. In my app I end up calling "setState" multiple times, as the user clicks different buttons and different "events" take place. I read this thread and then consolidated all of my setState calls into one function.

updateStateValuesAndLocalStorage(name, value) {
this.setState(
  {
    name: value
  },
  updatedState => {
    console.log("updatedState: ", updatedState);
  }
);
localStorage.setItem(name, value);
}

I also read this thread so I know that the asynchronous thing is probably causing my issues. But being a newbie I am struggling to solve this. Any help or guidance here would be much appreciated!

where do you call updateStateValuesAndLocalStorage ? =)) kindly include the gist of the component if you can. I'm assuming you're using class based components. is this.state definition in the constructor? — Franrey Saycon, Dec 03 '19 at 23:22
It is called multiple times in my component class, during various click and other events. — tcDev, Dec 03 '19 at 23:25
did you bind this to your function? there's a good chance these are null. (i can't really tell since there's no example of the component) also, name there became a key instead of its actual value being the key. `{ [name]: value }` do this. usually, event object is being passed in these functions. You can access name and value from it (provided your input has these props) like so, `const { name, value } = event.target` — Franrey Saycon, Dec 04 '19 at 00:14

adamz4008 · Accepted Answer · 2019-12-04T00:17:44.343

1

It looks like they are always getting stored, in the updateStateValuesAndLocalStorage function, in the name property, instead of the actual property name.

Should try using [name]: value instead of name: value.

I think that's why it's showing up in localStorage but not the state:

localStorage can take a String variable as an argument, but Object treats variable names in property names without []'s as a string.

edited Dec 04 '19 at 00:17

answered Dec 03 '19 at 23:30

adamz4008

660
4
10

I dont have enough points to add the image of Chrome devtools showing local storage. But yes, all the values are present in local storage. A couple of those values are failing to get loaded into my state variables. – tcDev Dec 03 '19 at 23:37
It looks like they are always getting stored, in the `updateStateValuesAndLocalStorage` function, in the `name` property, instead of the actual property name. Should try using `[name]: value` instead of `name: value`. I think that's why it's showing up in localStorage but not the state- localStorage can take a String variable as an argument, but Object treats variable names in property names without []'s as a string. – adamz4008 Dec 03 '19 at 23:53
Thank you!! That fixed my issue. Once I added [] around the name portion all of the values are visible in state and on my UI. – tcDev Dec 04 '19 at 16:25

score 1 · Answer 2 · answered Dec 04 '19 at 01:23

What kind of objects are you storing? Are they all strings? LocalStorage only stores strings, I think.

When saving to localStorage, try changing your code to this:

localStorage.setItem(name, JSON.stringify(value));

and when loading it back from localStorage:

this.state = {
  fieldName1: JSON.parse(localStorage.getItem("fieldName1"))
}

This should ensure that more complex variables get properly stored and restored.

Also, make sure your names match - in your question the state variables start with lower case characters but you're reading items starting with uppercase characters

REACT state from local storage not loading

2 Answers2