Local storage and persistent state in React - reactjs

Question

I want to make a like button where user can click and like something. When user clicks the button remains red even after refresh. How can i implement this?
I have this code. When i refresh the local storage gets reset. How can i get around this?
useEffect(() => {
setColor(window.localStorage.getItem('color'));
}, []);
useEffect(() => {
window.localStorage.setItem('color', color);
}, [color]);
const handleClick = () => {
setClicked(prevValue => !prevValue)
if(clicked){
setColor("red")
}else{
setColor("")
}
}
<div className="App">
<div className="container">
<button style={{backgroundColor: color}} onClick={handleClick} > +</button>
</div>
</div>

Answer 1

Try this approach. We need check twice localStorage first when the component mounting, second when we clicked the button. example
App.js
import { useState, useEffect } from "react";
const App = () => {
const [color, setColor] = useState("");
useEffect(() => {
const lS = window.localStorage.getItem("color");
if (lS) return setColor(lS);
localStorage.setItem("color", "");
}, []);
const handleClick = () => {
const lS = window.localStorage.getItem("color");
if (lS === "") {
localStorage.setItem("color", "red");
setColor("red");
}
if (lS !== "") {
localStorage.setItem("color", "");
setColor("");
}
};
return (
<div className="App">
<div className="container">
<button
style={{ backgroundColor: color }}
className="like-button"
onClick={handleClick}
>
+
</button>
</div>
</div>
);
};
export default App;

Answer 2

I have tried to duplicate this error in a sandbox. However, on my machine it works. Could it be that you have localStorage.removeItem('color') somewhere else in your project and gets called? Or maybe a problem with your browser. Here is the sandbox where it works: https://codesandbox.io/s/magical-shannon-cot7i?file=/src/App.js

Answer 3

I hope, it will work I have not tested it but I am sure it should work
useEffect(() => {
const storedColor = localStorage.getItem('color')
if(storedColor) {
setColor(storedColor);
}
}, []);
const handleClick = () => {
setClicked(prevValue => !prevValue)
if(clicked){
setColor("red");
localStorage.setItem('color', color);
}else{
setColor("")
}
}
return <div className="App">
<div className="container">
<button style={{backgroundColor: color}} onClick={handleClick} > + </button>
</div>
</div>