DEV Community

Cover image for React JS CRUD operations using Local Storage
Deepak Jaiswal
Deepak Jaiswal

Posted on • Edited on

4 1 1 1 1

React JS CRUD operations using Local Storage

many developers using localStorage for learning or some operation
like add to cart and store token or user information into the browser.

What is local Storage?

local storage is type of memory in our browser to save our data.
local storage storage limit is 5 MB.

local storage is our browser memory so we can store everything in our browser using javascript or ReactJS.

In HTML

<script>
localStorage.setItem("key","value");
localStorage.getItem("key");
localStorage.removeItem("key");
console.log(localStorage)
</script>
Enter fullscreen mode Exit fullscreen mode

In ReactJS

function App(){
localStorage.setItem("key","value");
const store=localStorage.getItem("key");
localStorage.removeItem("key");
console.log(localStorage)

return(
<div>
{store}
</div>

)}

Enter fullscreen mode Exit fullscreen mode

In many users questions how we store array of object in localStorage. here is the solution.

const data={
name:"Deepak",
address:"Allahabad"
}
localStorage.setItem("user",JSON.stringify(data))

const user=JSON.parse(localStorage.getItem("user"))

console.log(user)
//it return {name :"Deepak", address :"Allahabad"}

Enter fullscreen mode Exit fullscreen mode

Top comments (2)

Collapse
 
suyashdev profile image
Suyash Vashishtha

Hey Deepak, there is a typo in your Title "RecatJS"... please correct it to React js :)

Collapse
 
deepakjaiswal profile image
Deepak Jaiswal

Ok thanks 🙏🙏

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more