How to use local storage in react

Hi,

I am new to react. let me explain the issue I am facing,

I am saving some user info for the user when the user logs in and I am retrieving that info from the local storage.

The issue I am facing is that when I am that component I am able to retrieve the value but if I am inside the application I need to repeat that code in every component.

Is there any place in the react lifecycle which always gets called despite the component I have requested so I can retrieve the values there.

Thanks

I’m not sure how “correct” my answer is but I have a few suggestions (from personal experience) that you may want to consider having a component higher in the hierarchy in your app handle authentication in its componentDidMount life cycle and storing whatever you need in localStorage.

How high in the hierarchy depends on whether or not anything below it requires access to the data you are storing in localStorage. This way you can make sure that whenever there is a page refresh on pages that require access user data, your app will retrieve the newest information and store it in localStorage

An alternative to using localStorage is to use a state container like Redux, which works equally well from personal experience.

I have NOT been formally trained on cyber security and the following comment is simply based on personal experience with React, Redux, Node and Passport; please take it with a grain of salt and do your own research (or ask an expert).

If I’m not mistaken, it’s not a good idea to store sensitive information in localStorage and you probably want to wipe it on sign out (if you are using Redux instead of localStorage then I think this isn’t an issue) or when the session expires. You can still use session cookies when working with React, similar to how you would in a non-React app, instead of rolling some sort of JWT implementation like 99% of the blog posts out there tells you to (some of them don’t even hash passwords…). Authorisation of further requests can also be initiated using that mechanism, too, with the appropriate credentials settings for your requests.

local storage is in the browser, you should be able to save from any component to localstorage , to retrieve data from the storage, if you want the component to have access to the data before or while it loads you can either put it in componentDidMount or in the constructor of the component.
Post your code if you want specific answers.

thanks a lot for your replies. let me rephrase the issue I am facing,

I have a login component in which I am retrieving the locale of the browser from the local storage and set it for the application in componentdidmount lifecycle method.

It is working absolutely fine even on page refresh for login but the problem is that if I have navigated to say any other component and refresh the page there the locale gets lost since now the componentdidmount is raised of the other component.

I can repeat the same code there but I am looking for a more better approach without changing a lot of things.

Thanks

Set your state to whatever data you’re getting from local storage, and pass it to the components that needs it through props

Ehh… I have no idea how I ended up trying to answer a completely different question. :sweat:

The behaviour you described is perfectly normal because that’s how it’s supposed to work, and it’s not a component lifecycle problem. If you want another component to have access to something in another component, you could:

  • Store the function for checking locale in localStorage in another file and import it to be used in componentDidMount() of every component that you need. This is effectively repeating the same code in every relevant component, but now changes only need to be made once and there is a lot less to type. You may have to make sure that the locale is always already set by the login component by the time this function is called in the relevant components and/or have some sort of fallback

  • Pass it down from an enclosing component as props as @jlowe1210 said. You may have to do this recursively (?) if you want all decedents to have access to it, I haven’t tried doing that recursively before so I can’t say much about that

class LocalProvider extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      locale: ''
    }
  }

  componentDidMount() {
    /*
      Retrieve the locale however you want and use this.setState() to store
      it in this.state.locale
    */
  }

  render() {
    const { locale }  = this.state;
    const { children } = this.props;

    /* Reference: https://stackoverflow.com/questions/32370994/how-to-pass-props-to-this-props- */children#32371612
    const childrenWithProps = React.Children.map(children, (child) => {
      return React.cloneElement(child, { locale });
    });

    return <div>{childrenWithProps}</div>
  }
}
  • Store the locale in a state container like Redux with a component and access it accordingly in components that require the locale

  • Use context, but that’s not recommended

I hope there is something more useful this time! :sweat_smile:

1 Like

Thanks a lot for your replies