Savio Martin
Savio Martin

Savio Martin

Use Local Storage in React - The fastest way! ๐Ÿš€

Use Local Storage in React - The fastest way! ๐Ÿš€

The fastest way to use local storage in your react app!

Savio Martin
ยทMar 26, 2021ยท

6 min read

Hello Devs ๐Ÿ‘‹

This is Savio here. I'm young dev with an intention to enhance as a successful web developer. I love building web apps with React. I have proved my superiority in frontend technologies.

Today, I'm gonna share how you can use local storage in your React app. โš›


scrnli_3_26_2021_9-56-14 AM.png

Last week, I published an npm package that will make the work super easier. It is called uselocalstorage-react-hook, and I'm pretty sure you'll love the way it makes everything super easy.


Lets get started ๐Ÿ‘จโ€๐Ÿ’ป

  1. Install package

    It is so easy, just go add the command in your terminal.

    npm i uselocalstorage-react-hook
    
  2. Import uselocalstorage-react-hook

    Import the hook to your project

    import useLocalStorage from "uselocalstorage-react-hook";
    
  3. Start using localstorage ๐ŸŽ‰

    const [user, setUser] = useLocalStorage("name", "John Doe");
    

    As you can see here, I have used the hook in the same way as using a useState. Yeah, that's it you can now use local storage. The data you have entered as user will stay persistent forever till you edit. So cool, isn't it ๐Ÿ™Œ Capture.PNG Yeah, that's it, now you can see a new variable with data is assigned in the local storage of our app.

Demo application

I hope you got a good understanding of using local storage now on your react app. Now, it's time to build an app that uses localstorage on our own. Let's see ๐Ÿ‘€

  1. Create a react app โš›

    npx create-react-app appname
    
  2. Install package

    For the sake of this app, lets install material-ui also

    npm i uselocalstorage-react-hook @material-ui/core
    
  3. Code the app ๐Ÿ‘จโ€๐Ÿ’ป

    Time to code โฒ, Lets head over to App.js and add an input with a <h1>. The input will store and edit the localstorage data. The <h1> will display the data. Here goes the sample code ๐Ÿ‘‡

import useLocalStorage from "uselocalstorage-react-hook";
import TextField from "@material-ui/core/TextField";
import "./styles.css";

const App = () => {
  const [user, setUser] = useLocalStorage("name", "John Doe");

  return (
    <div className="App">
      <TextField
        label="Name"
        variant="outlined"
        value={user}
        onChange={(e) => setUser(e.target.value)}
      />
      <h1>{user}</h1>
      <p>Refresh this page, the name remains the same. </p>
    </div>
  );
};

export default App;

Now the input will take care of the user and <h1> will display it.

To make the app look bit better, I'm gonna add some styles to the app ๐ŸŽจ. Here goes the App.css

body {
  background: #f5effc;
  padding: 20px;
  font-family: "Roboto", sans-serif;
}

Now, our app will look like this. Seems pretty right?

scrnli_3_26_2021_10-21-20 AM.png

Now you can edit the input, you can see that the <h1> is also changing.

Now, it is time to test. Just refresh the page โ™ป

You can see that the user remain persistent, it will still show the name we have entered before. This is exactly what we wanted

Now, to check, just inspect your app

inspect > Application > Storage > Local Storage > name

We can see a key called name has our entered value in it. It is also updating real time when we change our value. It was easy, right ๐Ÿš€

Live Demo ๐Ÿš€

More demos โœŒ

Here are some advanced demo's of localstorage you will love, Enjoy! ๐ŸŽ‰

  • Intermediate

You can see in this demo, you can ramdomize your gradient and when you refresh โ™ป the page, you'll come back to the last gradient. ๐ŸŽจ

  • Advanced

This is a bit advanced demo, this demo uses github api to create a card for a user. You can add a github username and it will show you his card with name, followers, bio etc. When you come back to the page again, you can still see the card of the user you have last entered. โœŒ


๐Ÿ‘€ Wrapping Up

Yeah, that's a wrap. Hope you enjoyed the article. Do not hesitate to share your feedback. I am on Twitter @saviomartin7. Give a follow!

I hope you learned to use local storage, now go start building amazing things. Feedbacks are greatly appreciated! ๐Ÿ™Œ

Have an amazing day!

๐ŸŒŽ Lets connect

๐Ÿ™Œ Support

My projects are fueled by coffees โ˜•, get one for me! โ˜•

Did you find this article valuable?

Support Savio Martin by becoming a sponsor. Any amount is appreciated!

See recent sponsors |ย Learn more about Hashnode Sponsors
ย 
Share this