DEV Community

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

Posted on • Edited on

3 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

Do your career a big favor. Join DEV. (The website you're on right now)

It takes one minute, it's free, and is worth it for your career.

Get started

Community matters

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 🙏🙏

Heroku

This site is built on Heroku

Join the ranks of developers at Salesforce, Airbase, DEV, and more who deploy their mission critical applications on Heroku. Sign up today and launch your first app!

Get Started

👋 Kindness is contagious

Immerse yourself in a wealth of knowledge with this piece, supported by the inclusive DEV Community—every developer, no matter where they are in their journey, is invited to contribute to our collective wisdom.

A simple “thank you” goes a long way—express your gratitude below in the comments!

Gathering insights enriches our journey on DEV and fortifies our community ties. Did you find this article valuable? Taking a moment to thank the author can have a significant impact.

Okay