Learn about using localStorage in Javascript and React

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

I made my first react project 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.

LocalStorage has four methods.

localStorage.setItem("data",data)
localStorage.getItem("data")
localStorage.removeItem("data")
localStorage.remove()

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

1. localStorage.setItem("data",data)

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

Below is an example of it.

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


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.

2. localStorage.getItem("data")

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.


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

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

3. localStorage.removeItem("data")

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.


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

4. localStorage.remove()

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


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.

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

Here is the link to my next post Persist data in Local Storage with React Hooks