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

Image of Timescale

Timescale – the developer's data platform for modern apps, built on PostgreSQL

Timescale Cloud is PostgreSQL optimized for speed, scale, and performance. Over 3 million IoT, AI, crypto, and dev tool apps are powered by Timescale. Try it free today! No credit card required.

Try free

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

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay