Learn about using localStorage in Javascript and React
Tags: react, javascript, tutorial, beginners
Published: 2020-12-08 05:34:40

In this post, I will discuss about localStorage in JavaScript and React.js

I made my [first react project](https://gautham-neo-budget.netlify.app/) using localStorage as a database.

As in react, the state vanishes when we reload the page, localStorage is the best way to persist data in a static react app.

I thought of making it with node.js and mongoose(mongodb) but localStorage was a good solution for a frontend developer like me.

<strong>LocalStorage has four methods.</strong>

1. localStorage.setItem("data",data)
2. localStorage.getItem("data")
3. localStorage.removeItem("data")
4. localStorage.remove()

We will also be using and discussing about JSON.parse() and JSON.stringify() in this post as well.

<strong>1. localStorage.setItem("data",data)</strong>

With setItem() we can set an item to localStorage which will persist even after we reload the page.

Below is an example of it.

![chrome-capture (32)](https://dev-to-uploads.s3.amazonaws.com/i/kg1pjp5c9se0pzcahq2n.gif)

A small use case can be when we click on a button, the data can be added to the localStorage.

```js

const click = () =>{
localStorage.setItem('data','data')
}
return(
<button onClick = {click}>Click</button>
)

```

We can set an object,string or even an array to the localStorage.

To know where our localStorage item is located, follow the steps below,

- Right click and click inspect.
- Go to application and you will find the items in the website name you are currently in.



<strong>2. localStorage.getItem("data")</strong>

After setting a data we can access the data with localStorage.getItem("data") 

Here we can get the element as a string with JSON.stringify() or as an object with JSON.parse() from a string.

```js

const data = JSON.stringify(localStorage.getItem('data'))

```

We can then use this data to map out to the frontend or whatever logic you wish.

<strong>3. localStorage.removeItem("data")</strong>

With localStorage.removeItem('data') we can remove the localStorage item.

Its use case is similar to setItem() as when we want to remove an item, we click a button to do that functionality.

```js

const remove = () =>{
localStorage.removeItem('data')
}
return(
<button onClick = {remove}>Click</button>
)

```

<strong>4. localStorage.remove()</strong>

With this function we can remove all the items in one go.

```js

const removeall = () =>{
localStorage.remove
}
return(
<button onClick = {removeall}>Click</button>
)

```

And these are some of the methods and usecases on how you can use localStorage in your projects.

As a frontend developer, localStorage is a life saver as you need not know backend and database concepts like node.js and mongodb for using routes like GET,POST in our static app.

I hope this post will help you in using localStorage in your personal projects as I used this exact concept here in my [previous project](https://gautham-neo-budget.netlify.app/).

<strong>In my next post I will discussing about how you can persist data in react with react hooks, the concept which I used in my [react project neo-budget](https://gautham-neo-budget.netlify.app/)</strong>

Here is the link to my next post [Persist data in Local Storage with React Hooks](https://dev.to/gautham495/how-to-persist-data-to-localstorage-in-react-with-hooks-6ma)

### Thank you for reading!!

<strong> <u>Check out my portfolio: </u> [Gautham's portfolio](https://gautham-portfolio.netlify.app/)</strong>

<strong> <u> Check out my blog: </u>[coding-magnified.tech](https://coding-magnified.tech)</strong>

<strong> <u> Check React Project about budgeting: </u>[neo-budget](https://gautham-neo-budget.netlify.app/)</strong>

If you want to appreciate my or support me, you can buy me a coffee with the link below,

<a href="https://www.buymeacoffee.com/XJvD4NhAK" target="_blank">
<img width="250px" height="100px"src="https://dev-to-uploads.s3.amazonaws.com/i/xwa28cylrit799s70lrs.png" alt="Buy Me a Coffee"</img>
</a>

### <u>My Other Articles: </u>

- [Universal CSS properties everyone must know](https://dev.to/gautham495/universal-css-properties-everyone-must-use-4kie)

- [Create-react-app](https://dev.to/gautham495/creating-a-new-react-app-with-create-react-app-4e9m)

- [Git for beginners](https://dev.to/gautham495/basic-git-knowledge-for-beginners-m4p)

 
- [Change headers in react with react-helmet](https://dev.to/gautham495/changing-headers-in-react-with-react-helmet-d0d)

- [Know How to apply box-shadow on all four sides.](https://dev.to/gautham495/know-how-to-apply-box-shadow-on-all-four-sides-43pn)
 
- [Simple CSS Selectors](https://dev.to/gautham495/simple-css-selectors-for-beginners-2i44).

- [CSS Pseudo Elements](https://dev.to/gautham495/css-pseudo-elements-for-beginners-53ob).