React 101 - 7/11 - How to use localStorage with React

Learn how to use localStorage with React.

React tutorial for beginners.

Download working files

Or signup to React 101 on my website to watch this course directly on my site without any ads.

React 101

Premium Online Courses for front end developers and designers.

[brianssendagire]

Great guy, great tutorial, I'm so happy you came to my aid

[esraamohamed]

Thank you, I really appreciate your hard work.

[MiracleInTransit]

Just what I needed at this moment. Cheers for this series!

[danilsviridenko]

if somebody want to see normal React (Local Storage)code which was writte with using Functional components here he is:

function App () {

const [state, setState] = React.useState({

user: '',

rememberMe: false

})



const ref = useRef(null)



const handleChange = (event) => {

const input = @t;

const value = input.type === 'checkbox' ? input.checked : input.value;



setState(Object.assign({}, state, {[input.name]: value }));

};





localStorage.setItem('foo', 'foo')

const handleFormSubmit = () => {

const { user, rememberMe } = state;

localStorage.setItem('rememberMe', JSON.stringify(rememberMe));



if (rememberMe) {

localStorage.setItem('user', JSON.stringify(user));

} else {

localStorage.setItem('user', '');

}

};



useEffect( () => {

const rememberMe = === 'true';

const user = rememberMe ? : '';

setState({ user, rememberMe });

}, [])





return (

<form onSubmit={handleFormSubmit} ref={ref}>

<label>

User: <input name="user" value={state.user} onChange={handleChange}/>

</label>

<label>

<input name="rememberMe" checked={state.rememberMe} onChange={handleChange} type="checkbox"/> Remember me

</label>

<button type="submit">Sign In</button>

</form>

);

}

[yampolskie]

Extremely helpful, I was wondering how to persist data retrieved from server. Thank you!

[Jwaana]

I really appreciate your explanations. Thank you very much !

[Alan-uedt]

May I know how to store integer or float in local storage?

[Watchcoolvedios]

Hi PETR, I follow each and every step of ur tutorial, I m facing an issue I.e. when I load / refresh the page the local storage key gets empty.plz guide

[DayAlexay]

Thank you for this video, it helps me :)

[plprz]

careful componentWillUpdate is deprecated. for those that dont know :)

[andresmontoya]

Thank you! Very good video, una chimba!

[simondinks]

is there a way to completely clear the local storage once the user close the react application window?