CODEWITHSUNDEEP
javascriptreactjs
tcDev
tcDev

Reputation: 185

REACT state from local storage not loading

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!

Upvotes: 1

Views: 1334

Answers (2)

Thomas Müller
Thomas Müller

Reputation: 15635

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

Upvotes: 1

adamz4008
adamz4008

Reputation: 650

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.

Upvotes: 1

Related Questions