Save State to LocalStorage & Persist on Refresh with React.js

Learn how to save React state and load it when a page refreshes using localStorage. We'll learn how to set up a simple example using React state, using an onClick handler to update that state, and using localStorage to store and retrieve the value.

🧐 What's Inside
Coming soon...

Demo Starter

💾 Code

🗒️ Read More

🔔 Subscribe for more tech and developer videos

🐦 Get updates straight to your Twitter @colbyfayock

📸 Catch the next stream live on Twitch @colbyfayock

✉️ Or a newsletter right to your inbox!

💝 Sponsor me for more free content like this!

🎥 Want to know what A/V equipment I use?

🧰 More Resources

Demo Starter

localStorage

🎼 Music
Music from Uppbeat (free for Creators!):
License code: WKRAJTE79NXIMWPX

#colbyfayock #reactjs #localstorage #react #webdevelopment

[edled]

Dude I dont know how to say this but I absolutely love you bro. Out of all the javascript tutorials ive watched (trust me, ive watched a lot), you are by far the best one. Such a clear voice, proper pacing, incredibly easy to understand explanation and just overall good quality video. You have earned yourself a sub sir and i will go to your channel first if i ever have a question about JS. Thank you very much

[Tomiszn]

I don't think I have enjoyed a tutorial video this much, it was so calm and I understood every bit of it, big ups!

[ahmedalijagic]

this guy posted a video year ago, and still answering his comments.

REAL G<3

[jamietse]

i m not an english native speaker. i pause and rewatch your steps couple of times to figure out what you have done. :) and i totally get it!!😁you explain very well!! thumb's up for you thank you!

[x_s_iv]

Thank you so much for posting this and explaining the process so well, especially the needing to use JSON stringify for objects and showing why in the dev tools. Much appreciation!!

[guern]

I've been trying to wrap my head around it for awhile, but this video just nails it! Thanks Colby!

[devinoutfleet]

Colby! You are such an AMAZING teacher! You have a gift my brother wow. Keep it up man you will reach and help so many people regardless of the industry you are in, I just know it. Keep going, you are truly gifted.

[thelonercoder]

man this was beautifully explained. Wish I found this channel when I was first learning React.

[adeyemiodusina]

Absolutely a no-brainer explanation. Thanks man.

[hendrickmanenga]

With this pedagogy, any complex subject becomes quite simple

[tmmx]

Great as always! A hint to anyone installing Next from create-next-app! I did this and this had strict mode activated, which means that every component is rendered twice when not in production. This was a nightmare for me trying to debug useState with initial values, values from localStorage, state updates from input onChange etc. I hope I can prevent someone else to waste a lot of time on this. :D

[edwinbanago]

thanks for this. i was confused at first not being able to properly use localstorage 😅

[wolfmeowmeow]

wow your teaching is so straight forward, just directly hits into brain.

[hafiedzmada]

Great video Colby! Well explained and easy to follow. Thank you!

[mohammedraheez]

Thanks a lot... God bless you.... I wasted one day on this... But finally got the job done... Thanks man

[koagarces]

Honestly, this guy is great at teaching. Keep it up man!

[IzharJumadi]

Thanks for the short and concise explanation!

[Tyler-zbec]

Thank you! Was having a difficult time getting this working

[m__link]

Dude, so the only video that I need, explain soooo easily; it works bless you!

[TomAinsworth]

Great vid Colby. This is really helpful and exactly what I wanted to know, thank you!