React js Tutorial - Save Data In Your Application With localStorage and sessionStorage

React JS - The Complete Guide (over 150 000 developers have taken this course):
bit.ly/2oCrfH0
Featured Full Courses:
React JS - The Complete Guide (over 150 000 devs enrolled)
bit.ly/2oCrfH0
React JS Web Development - The Essentials Bootcamp
bit.ly/2oEK2S1
The Complete React Js & Redux Course - Build Modern Web Apps
bit.ly/2mWNebj
The Complete React Native + Hooks Course
bit.ly/2mofraC
React Native - The Practical Guide
bit.ly/2nTm98O
The Complete JavaScript Course 2019
bit.ly/2mjsbiB
Learn how to save data in your React application by using localStorage and sessionStorage.

[@mohamedhemidi]

Short and straight to the point , thank you Bro !

[@FullstackDevelopment]

Thanks alot!

[@etekumoses3320]

short and powerful videos haha thanks man you helped me alot..

[@FullstackDevelopment]

You are welcome!

[@Eminence43rd]

Where is your microphone positioned while doing this video, my earphones so weird.

[@danilsviridenko6565]

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 = localStorage.getItem('rememberMe') === 'true';
const user = rememberMe ? JSON.parse(localStorage.getItem('user')) : '';
setState({ user, rememberMe });
},[])
return (
User:
Remember me
Sign In
);
}

[@user-yv7hk7tg2f]

Why does the sound only come from the left...

[@luccassodre4078]

Great explanation. Thanks

[@FullstackDevelopment]

Thanks!

[@Mikuwl]

Thank you for the video. Could you access the set data from windows explorer for example?

[@ashikmahmud7609]

woww... brother.. that's cool

[@A8Sea]

Well made video, Thanks so much.

[@FullstackDevelopment]

You are welcome

[@patrickkirkby102]

Once I have this code working, how can I use the value from an input field to save into localStorage? Sorry, I'm still learning.

[@albertvaldes2580]

Great, thanks for the video

[@FullstackDevelopment]

Thanks

[@robertoaleydon3044]

Very good, thanks for this tutorial

[@FullstackDevelopment]

Thank you

[@hk_build]

What if user data is sensitive and you still need to store in UI what we can use apart from local storage????

[@youssef.elmoumen]

Thanks for the tutorial but i have a big problem with that localstorage when I'm trying to save JWT.. even when I put in a Promise the first time it returns undefined

[@baron1538]

Your audio is only on the left side fyi

[@catapult171]

Nicely explained and very helpful. Thank you.

[@FullstackDevelopment]

You are welcome

[@tootyrnt5533]

are local and session storage limited to class based components? How would implement them using functional components

[@ashprasad9075]

It shd work on functional components i guess.

[@mr.RAND5584]

Why class?

[@nages1549]

How it's working dynamically like when user came on the page get user data in local storage?

[@300deQI]

UseEffect

[@dirasadirasa2499]

do it with a useState

[@SapanKumarDas]

Boss, what are the difference?

[@FullstackDevelopment]

It's mentioned at 5:09. With localStorage the data persists if the user closes the browser, with sessionStorage the data is only accesible for the current session.

[@ProgrammingwithPeter]

localstorage api is unrelated to any frameworks, it's language specs

[@FullstackDevelopment]

Yes it was introduced in HTML5 and works in most web clients with regular js, this is an example of how to use it in react js.

[@zevioxshopping8944]

Bhaiya Thora voice tez kr lo ... .

[@imtiazkabir6115]

Totally incomplete, do you ever refresh your page? You will lost everything.

[@shubh_1999]

No, its the console logs which are being flushed. If you go to the application tab in the developer console, you'll see the key value pair. Infact, in localstorage, even if you restart your PC, you shall still see the data.

[@ernestj8000]

Speak up or invest in a better microphone.