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

Подписаться 29 тыс.

Просмотров 101 тыс.

50% 1

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
github.com/col...
💾 Code
github.com/col...
🗒️ Read More
spacejelly.dev...
🔔 Subscribe for more tech and developer videos
www.youtube.co...
🐦 Get updates straight to your Twitter @colbyfayock
/ colbyfayock
📸 Catch the next stream live on Twitch @colbyfayock
/ colbyfayock
✉️ Or a newsletter right to your inbox!
www.colbyfayoc...
💝 Sponsor me for more free content like this!
GitHub: github.com/spo...
Other: hello@colbyfayock.com
👨‍🚀 Brought to by colbyfayock.com
www.colbyfayoc...
🎥 Want to know what A/V equipment I use?
www.colbyfayoc...
🧰 More Resources
Demo Starter
github.com/col...
localStorage
developer.mozi...
🎼 Music
Music from Uppbeat (free for Creators!):
uppbeat.io/t/r...
License code: WKRAJTE79NXIMWPX
#colbyfayock #reactjs #localstorage #react #webdevelopment

Опубликовано:

27 сен 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 279

@colbyfayock Месяц назад

Learn how to build a full stack Next.js app in my upcoming course: colbyfayock.com/course

@ahmedalijagic9504 9 месяцев назад

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

@colbyfayock 9 месяцев назад

🫶🏻

@edled5939 9 месяцев назад

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

@colbyfayock 9 месяцев назад

really appreciate that! glad to hear it's been helpful 🙌

@Tomiszn 2 года назад

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!

@colbyfayock 2 года назад

that makes me really happy to hear, glad you both enjoyed it AND it was helpful 🙌

@passsacaglia Год назад

same!!!

@jamietse8539 Год назад

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!

@colbyfayock Год назад

I'm so glad to hear that!! 🙏🙌

@t0mmx 2 года назад

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

@t0mmx 2 года назад

Check in your next.config.js and just disable it like this: reactStrictMode: false

@colbyfayock 2 года назад

@@t0mmx TIL thanks for the tip! did you find more resources that explain what's happening?

@t0mmx 2 года назад

@@colbyfayock Not sure if my comments disappeared?

@colbyfayock 2 года назад

@@t0mmx maybe if you tried to post links, youtube might have deleted 🤔 if you try to DM me maybe i can try to post them on this thread for anyone else interested twitter.com/colbyfayock

@chinyedanielson 2 года назад

Thank you very much for this! I almost gave up on adding localStorage to my side project (e-commerce app) that i'm working on. This comment literally saved me 😅

@guer0n 2 года назад

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

@colbyfayock 2 года назад

no problem!🙌

@thelonercoder5816 Год назад

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

@colbyfayock Год назад

Glad to hear it at least helped now 🙏

@devinoutfleet1998 Год назад

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.

@colbyfayock Год назад

really appreciate the kind words Devin!

@hendrickmanenga9213 7 месяцев назад

With this pedagogy, any complex subject becomes quite simple

@colbyfayock 7 месяцев назад

👏

@wolfmeowmeow Год назад

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

@colbyfayock Год назад

thank you! that's awesome to hear

@mohammedraheez3236 2 года назад

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

@colbyfayock 2 года назад

glad it was able to help!

@hafiedzmada 2 года назад

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

@colbyfayock 2 года назад

Glad to hear, no problem!

@edwinbanago278 2 месяца назад

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

@colbyfayock 2 месяца назад

glad it helped!

@m__link6499 2 года назад

Dude, thaaaaaannnnnkkkkkk youuuuuuuu so muuuuuuuuuch!!!!!!! the only video that I need, explain soooo easily; it works perfectly......god bless you!

@colbyfayock 2 года назад

Haha no problem!

@IzharJumadi Год назад

Thanks for the short and concise explanation!

@colbyfayock Год назад

no problem :)

@konidoniravirr6580 2 года назад

Hats'off Colby, you deserve million subscribers

@colbyfayock 2 года назад

thank you :)

@erickgono184 2 года назад

100% you help me exactly what I want. Thank you so much Colby!

@colbyfayock 2 года назад

np ,glad to hear that! :)

@TomAinsworth94 Год назад

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

@colbyfayock Год назад

Really happy to hear that 🙌

@AishwarysinghEC 6 месяцев назад

Wow man,i got clarity

@colbyfayock 6 месяцев назад

🙌

@saifuislam7515 6 месяцев назад

well explained, exaclty what i was looking for

@colbyfayock 6 месяцев назад

awesome! 🙌

@oreki1996 Год назад

You're so good at teaching man.. 🙏🙏

@colbyfayock Год назад

thank you ♥

@Tyler-zb6ec 2 года назад

Thank you! Was having a difficult time getting this working

@colbyfayock 2 года назад

glad it helped 💪

@bluewonk9232 9 месяцев назад

This video is a gem

@colbyfayock 9 месяцев назад

thanks :D

@AlexandrosKyriakou-jj4rt Год назад

amazing tutorial experience! looking forward for more

@colbyfayock Год назад

Thank you!

@x_s_iv1844 2 года назад

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

@colbyfayock 2 года назад

No problem 😁 Super glad it helped!

@yubin_jo Год назад

thank you for such a good explanation

@colbyfayock Год назад

no problem!

@colbyfayock Год назад

Not working? Try disabling Strict Mode in dev when testing: nextjs.org/docs/api-reference/next.config.js/react-strict-mode

@PetriikVx Год назад

Thank you friend! You saved me hourssssss!

@colbyfayock Год назад

@@PetriikVx np, happy to hear that!

@live_emulator Год назад

exactly what i needed! not even chatgpt could tell me this lol

@colbyfayock Год назад

@@live_emulator haha glad it helped!

@jasom01 Год назад

Oh man, after two days without find the solution I see this comment. IT WORKS! Thank you so much. But now I have a question: Is not recommendable disable Strict Mode, right? I mean, I've check this works and now I can put it's value back to true, and when I deploy the application to production it will work, because that setting is just for development purposes, isn't it?

@chandramulyana77 2 года назад

Crystal Clear. Thank you

@colbyfayock 2 года назад

No problem 🙌

@richi5355 2 года назад

Great video very easy to follow and great information !

@colbyfayock 2 года назад

Thank you! 🙌

@phanta5m Год назад

amazing, so calm, and simple

@colbyfayock Год назад

thanks :)

@vladraileanu3726 Год назад

Great stuff man, damn those cookies, this approach is much simpler for what i needed, thank you! :x

@colbyfayock Год назад

haha no problem!

@joedu7320 Год назад

Can I read the localstorage value first, if the local storage value exists, I will use this value as a flag to decide show the banner or not, if the local storage value is null or undefined, I will set the flag to true.( the first time render the page), in this case the banner won't flash after you hided and refresh the page.

@colbyfayock Год назад

sure you can have it hidden by default. you could have the default undefined value and use a state flag of something like true/false or "show"/"hide". with pure React, i think you're likely going to have a flash no matter what or at least a hidden then flash in (as opposed to in and out) from my understanding due to the nature of the client needing to look up the localstorage value

@nathanreed4705 Год назад

I was having issues with the local storage being written to my default sate on every refresh. I ended up getting it fixed by adding an arrow function to my useState that returns the local storage value if it’s defined or the default if not.

@colbyfayock Год назад

oh interesting - can you share the code?

@nathanreed4705 Год назад

@@colbyfayock Yeah sorry just seeing this, this code was for a project I was working on but I think the concept is pretty sound: const [songs, updateSongs] = useState(() => { const songsList = window.localStorage.getItem(`Playlist${data.name}`); return songsList != null ? JSON.parse(songsList).songs : data.songs; }); basically just removes the need for the second useEffect to set the state to what is currently in storage by conditionally returning the data from local storage if its defined or the default value if it is not.

@seancoutinho1638 Год назад

Loved this tutorial a lot

@colbyfayock Год назад

Thank you!!

@meenakshimuthu9523 5 месяцев назад

how can we avoid reinitialize of local storage when the page loads again?

@Bruno_Corso 11 месяцев назад

Facing this as a running website, what should happen for the user se the banner again? I don’t wanna add more code or another button that makes it appear again. Is the user must clear the cache frm his browser? Thanks for the video, really clear and didactic

@colbyfayock 11 месяцев назад

good question - i think thats largely dependent on what the banner is. perhaps instead of an X it's a collapse icon, like a carrot, that collapses it into a small UI button that can be expanded again. really there needs to be some interaction point, so its figuring out what that looks like and there's not really a 1-size fits all recommendation there

@tiggenilsson5359 Год назад

Amazing! Thanks a lot.

@colbyfayock Год назад

no problem :D

@amirnoorani5017 10 месяцев назад

That was awesome Colby like always. Could you make tutorial on Redux and LocalStorage persist? does it need Saga?

@colbyfayock 10 месяцев назад

hey thanks! not sure ill get to that anytime soon but i'll add it to my list!

@techlightdev Год назад

Great video and thank you for knowledge.

@colbyfayock Год назад

Thanks and you're welcome! 😁

@PetrosPollakis Год назад

Amazing video. Keep going bro!

@colbyfayock Год назад

thanks :)

@nodnik7 2 года назад

Thank you Master Fayock

@colbyfayock 2 года назад

you're welcome!

@tire Год назад

this helped me thanks dude

@colbyfayock Год назад

glad to hear! 🙌 np

@iamsarb_0017 7 месяцев назад

moving from first page -> second ( using navigate )state persists ( using redux tookit ) moving backwards refresh the page/state changes back how to persist at first page ??

@colbyfayock 7 месяцев назад

that sounds like either the storage isn't working or you're overwriting the state with an empty value there's also this you can try if you're not having much luck: github.com/rt2zz/redux-persist - though it hasn't been updated in 3 years

@iamyara Год назад

Thank you so much!💝💝

@colbyfayock Год назад

You're welcome!

@felipealves9653 2 года назад

Fantastic, you helped me a lot

@colbyfayock 2 года назад

awesome glad to hear!

@agataduda3731 Год назад

Great Video! Thanks a mill

@colbyfayock Год назад

np :)

@carlospavajeau7179 2 года назад

GG ! finally something that works ahahah

@colbyfayock 2 года назад

👏🙌

@prajnanammohnty950 8 месяцев назад

Hi can we use redux persist which by default stores it as persistroot key ? Isnt that better than storing it manually in local storage. What do you think and whta are its cons 😅

@colbyfayock 8 месяцев назад

if you're already using Redux, it totally makes sense to use a Redux-oriented approach, but not everyone needs Redux, so this is a solution using native state

@johanesalberto6136 Год назад

thank you so much brother

@colbyfayock Год назад

You got it

@prateeksuman51 Год назад

Thank you so much!!

@colbyfayock Год назад

you're welcome!

@FaridRoushdy 5 месяцев назад

Thank you 👍

@colbyfayock 5 месяцев назад

you're welcome!

@joedu7320 Год назад

Great video, thanks. for the Token what should we do about it to make it safe?

@colbyfayock Год назад

np. generally its considered more secure to store token's as http-only cookies, but im not an expert in security

@chatlurker 6 месяцев назад

Hi, I have a question, I am using localStorage and its working perfectly on my system, but the same code doesn't work on other systems. On reload, the data becomes null.

@colbyfayock 6 месяцев назад

is the difference your development server vs deployed to production? you can try building the project locally and serving the production build to test how it works, because it may be different particularly due to how things render with React Strict Mode have you also tried clearing your localstorage and all local data, then trying again? try in a new browser? could help for debugging and reproducing on your machine

@chatlurker 6 месяцев назад

@@colbyfayock its on a development server, I checked the local storage on my teammate's system and its not storing the data. I am now using redux persist but I will check with a different browser too. Thanks for your help

@chatlurker 6 месяцев назад

@@colbyfayockupdate, I checked with Brave (I was using edge) and its not working there.

@junmarkchi8538 2 года назад

Thanks . you saved me

@colbyfayock 2 года назад

yay glad to hear that!

@focusroom_ 11 месяцев назад

Very helpful

@colbyfayock 11 месяцев назад

Awesome glad to hear!

@khaung4413 11 месяцев назад

Very great video

@colbyfayock 11 месяцев назад

thank you!

@khaung4413 11 месяцев назад

@@colbyfayock How can I reload or refresh the web app while clearing data when I switch languages? For example, I want to clear the input that I filled and reset the date range picker when I switch from English (US) to Chinese.

@yogeshkodlinge 2 месяца назад

Hey i am building a search functionality and want to store the user input that user has entered in the search bar even though he refresh the page

@colbyfayock 2 месяца назад

hey localstorage should work for that!

@yogeshkodlinge 2 месяца назад

@@colbyfayock will give it a try... Currently out of station.. Notify you if it works. Thanks a lot

@niki5223 4 месяца назад

Amazing 👏🏻

@colbyfayock 4 месяца назад

thanks! 🙌

@bernardodesouzasilva7912 Год назад

Thank you, amazing video!

@colbyfayock Год назад

thanks and np :)

@andrews13 5 месяцев назад

Is this actually required in the case of Cart menu especially? What if we are updating to the server about the cart status? It would be possible to access this from any device then. If it was some sort of other forms then it could be a feasible way.

@colbyfayock 5 месяцев назад

yup, you can certainly update a server with that information instead!

@andrews13 5 месяцев назад

@@colbyfayock Thanks

@robbiecrenshaw8393 2 года назад

Once again, another great video,. thank you! Question is it ok to save a more complex state to local storage? Like a single state but its an array with multiple values/objects?

@colbyfayock 2 года назад

Thanks! Absolutely. No reason you can't. It's limited to 5mb to keep in mind but that's a lot. If it gets too complex and you already manage in multiple state sets you can even store multiple under different storage keys

@princeajayi9293 Год назад

Thank you very much for the video Pls is there a way to avoid the short time flash from showing I have a NextJS app where a user can change the primary colour used on the page. I had to store the colour the user picked last in the browser's session storage But there's this short time flash of the default colour when the user refreshes the page before it gets updated by react state So is there a way to avoid the flash🙏

@colbyfayock Год назад

thanks! i wonder if you could grab the session data in the data fetching method if your using SSR? not sure about localstorage but probably cookie data if nothign else

@GabrielMartinez-ez9ue Год назад

Hey Colby. Can you perhaps share a hook snippet for local storage? Every thing I find doesn't take into consideration SSR.

@colbyfayock Год назад

hey i dont have anything already available but you should be able to take the code from this and put it in a function which is essentially a hook github.com/colbyfayock/my-welcome-banner/blob/main/pages/index.js#L9-L18

@GabrielMartinez-ez9ue Год назад

@@colbyfayock Thanks Colby

@dr_morpho 2 года назад

Thank you ) 🤝

@colbyfayock 2 года назад

no problem! 🙌

@namanrajput7686 2 года назад

can i store a gltf file in local storage from json (file url). How can i do ?

@colbyfayock 2 года назад

you could try using the FileReader API and grab it as a Data URL, i haven't tried this before though. check out this video for reading images into data URLs ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-3OeEa2cZABM.html

@universecode1101 2 года назад

Great 👏🏻👏🏻👏🏻👏🏻

@colbyfayock 2 года назад

thank you! 🙌

@alitonoliveira1700 Год назад

Hello, Colby! How to get rid of the banner flash just after the page refresh?

@colbyfayock Год назад

hey check out this comment for some good answers to try ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-rWfhwW9forg.html&lc=UgxAufLFmjOvQWzWGaR4AaABAg

@alitonoliveira1700 Год назад

@@colbyfayock That is the same video link :).

@colbyfayock Год назад

@@alitonoliveira1700 it links to a comment. Scroll to the comments section

@MunnySingh-qi7kc Месяц назад

my code is working after disable react strick mode....why?

@colbyfayock Месяц назад

yeah its a common painpoint in dev mode where react will technically run twice as it's mounting sentry.io/answers/react-useeffect-running-twice/

@MunnySingh-qi7kc Месяц назад

@@colbyfayock but I want that my code should working properly without disable stick mode

@ElectricSoberGoose Год назад

Hey, I'm building an application in which the data is obtained from the local storage, but as to display them, I always need to refresh the page. I want them to display right away. I tried useEffect with a value in the dependency array, but it causes too many re-renders. Is there any way to update state without refreshing?

@colbyfayock Год назад

so just to make sure i understand clear - you have data stored in localStorage. that data updates independently of the application. you want the application to update whenever the localStorage changes? you could treat it like an API and create an interval that checks the localStorage source and update if you detect a change useEffect(() => setInterval..., []) the tricky thing is making sure that you have a confident way to detect the change so you're not back to the same place of causing a bunch of rerenders, but that depends on how your data looks like If you control the localStorage source, could add a lastUpdated property or something you can inspect

@HumanTouchArt 2 года назад

ok i think i found a solution for some reason strict mode in next.js config file was preventing me to store local storage on update .... just change next.js config module.exports = { reactStrictMode: false, } and it should work

@colbyfayock 2 года назад

ah weird, i wonder if it messes with the order of events for this solution. thanks for the heads up

@LeoWasHere1 8 месяцев назад

But isn't that less secured to store info in localStorage ?

@colbyfayock 8 месяцев назад

You generally wouldn't want to store anything that would have the potential to access sensitive or personal data

@hunterbidenafterlife Год назад

Thanks, could someone explain why if(data !== null){ setShowBanner(JSON.parse(data)) } works but if(data){ setShowBanner(JSON.parse(data)) } does not work. Ive been ripping my hair out for hours

@solanaromero2085 Год назад

hello! it's not the same saying that data is not null than saying that data exist. One is asking if data doesn't return null and the other one is asking if there's something inside data. hope i made myself clear. have a great day :)

@TechX5others 2 года назад

I followed you coz you are into next js. Please do a next js create portal if you have not

@colbyfayock 2 года назад

great idea! i'll add that to my list

@sudeepshetty4804 2 года назад

hey, i cant able to store the data, when i refresh page it is showing true, could you help me

@colbyfayock 2 года назад

Hey you can check out the code here github.com/colbyfayock/my-welcome-banner

@kennedyfreitas7548 2 года назад

@@colbyfayock I am actually having the same issue, the stringified state shows at the console and everything but after refreshing, it goes back to it's inital state. hmm Odd

@sudeepshetty4804 2 года назад

@@kennedyfreitas7548 hey kennedy remove strict mode from index.js. it will work

@knvsf2829 2 года назад

@@sudeepshetty4804 which index.js file?

@knvsf2829 2 года назад

@@sudeepshetty4804 worked for me dude, thanks for the tip

@arogyabichpuria3262 2 года назад

Hi, as you mentioned that even though we're using local Storage, it's still leaking through the initial page load, so is there a way to totally avoid that?

@colbyfayock 2 года назад

if you look at the comment from Khalid, there are a few ideas there, including this: www.joshwcomeau.com/react/dark-mode/ - and sounds like useLayoutEffect might help

@arogyabichpuria3262 2 года назад

@@colbyfayock oh cool thank you!! ,Will surely look into it

@thitchannel421 2 года назад

if i want to edit data in localstorage, what should i do.

@colbyfayock 2 года назад

You would need to set the item again.

@rajucvvn1410 2 месяца назад

is it supporting safari?

@colbyfayock Месяц назад

should be! caniuse.com/?search=localstorage

@netsaosa4973 Год назад

space jelly

@colbyfayock Год назад

the one and only!

@alsherifkhalaf7385 2 года назад

Hi Colby , Can we use locaStorage in SSR ?

@colbyfayock 2 года назад

hey! so if you're referring to accessing it on the server like you would a cookie, i dont believe you can do that

@alsherifkhalaf7385 2 года назад

@@colbyfayock I am using directus a sa Back-end , when logging in it stores auth tomen and auth token expire time in local storage . Do you believe that if i used these keys from local storage to fetch data in fronted using useEffect .. is this secure ?

@colbyfayock 2 года назад

@@alsherifkhalaf7385 i don't want to advice on security as i'm not an expert. it's generally not recommended to store API keys in the client unless the key is intended to be public and secure in another method

@yuanquan5797 Год назад

Now with strict mode... it's broken.... kinda...

@colbyfayock Год назад

yeah unfortunately in dev mode it prevents it from working. you can get around it by switching it to off for dev mode in your next.config.js

@georgekrax 2 года назад

Do you post on LinkedIn?

@colbyfayock 2 года назад

I don't really put any effort into sharing there. Mostly Twitter and my newsletter

@usmonzo4859 2 года назад

idk why but its not working in my project(

@colbyfayock 2 года назад

some have mentioned that the issue appears ot be Strict Mode, try disabling that in the project for development

@usmonzo4859 2 года назад

@@colbyfayock Thank you so much bro!

@jefferiushere2k7 Год назад

@@colbyfayock You beautiful person! Was stuck on this for 3 days!!

@colbyfayock Год назад

@@jefferiushere2k7 ♥

@alstudiowebdev Год назад

Dude! When I say I have been banging my head against the wall for the last 24hrs trying to figure out why this works on Colby's NextJS v12.1.0 and NOT on future versions ( Not sure when the strict mode issue starts )! I finally just had the thought of scrolling through the comments to see if SOMEONE had asked the question already 😅. So thank you @usmonzo for taking the time to ask and thank you @Colby Fayock for taking the time to answer!

@colbyfayock 2 года назад

Next learn how to trigger functionality when scrolling to an element ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-r1auJEf9ISo.html Make sure to subscribe for more! ru-vid.com

@misael5179 Год назад

Thank you!

@colbyfayock Год назад

You're welcome

@neoswann2143 7 месяцев назад

How do i prevent the quick flash?

@colbyfayock 7 месяцев назад

thats a challenging question as if you're loading the application purely clientside with a vanilla React app, you need to wait until the javascript loads in order to do anything if you're using something like Next.js where you can use serverside rendering you can store the configuration in a way that you can grab that value from the server and render it immediately on the page

@visheshmp 7 месяцев назад

Please create a video on how to apply perfect persistant logic using recoil in react with Typescript

@colbyfayock 7 месяцев назад

thanks for the topic idea!

@visheshmp 7 месяцев назад

waiting for that video, I really need it.@@colbyfayock

@khalidm5939 2 года назад

Hey Colby, great video. Is there a way to stop the banner from flashing briefly as shown in the end?

@colbyfayock 2 года назад

Probably the most common way would be to set the preference using a server rendering. You could also set the default first response to not include it and add in the client. Could also try this approach www.joshwcomeau.com/react/dark-mode/

@aliinceoglu6076 2 года назад

You could for instance animate the opacity with framer-motion.

@colbyfayock 2 года назад

@@aliinceoglu6076 great idea! Framer motion is an awesome tool

@EmptyBehind 2 года назад

You can also use useLayoutEffect instead of useEffect. :)

@colbyfayock 2 года назад

@@EmptyBehind oooo good point

@adeyemiodusina3826 27 дней назад

Absolutely a no-brainer explanation. Thanks man.

@colbyfayock 27 дней назад

no problem!

@radupadurariu Год назад

how would you replace useEffect with componentDidMount on class component? I need to use localStorage on a class component.

@colbyfayock Год назад

i haven't used those lifecycle methods in a while but i would suspect that you cuold run the same similar initial code in DidMount and can use DidUpdate for updates

@saadelnady 8 месяцев назад

can i render the same state in different pages using localStorage without redux or props drilling ??

@colbyfayock 8 месяцев назад

theoretically, yes. i dont know the implications of this. but it looks like a storage event is fired upon change that you can list to for state updates: developer.mozilla.org/en-US/docs/Web/API/Window/storage_event - just be aware of what you're storing there. curious what you come up with

@GospodinLLIoTaKe 2 года назад

everything is good except one thing, why you didn't add an app delay till data is loaded? why you see these page jumps in real time this is sucks

@colbyfayock 2 года назад

Thanks for the feedback!

@rhazebbrown8935 Год назад

hi colbyfaycock, please can you do a video where when you logout from the redux it saves everything done so when you log back in it is persisted base on the user that logs in.

@PiyushNextupgrad Год назад

i am making a todo list for practice and doing everything correct still local storage gets cleared on refresh any help?

@colbyfayock Год назад

hey Piyush, check out the code here: github.com/colbyfayock/my-welcome-banner

@n4h92 11 месяцев назад

Great video! Can i set a script that load the localStorage on start application?

@colbyfayock 11 месяцев назад

Can you elaborate? Not sure how that's different from the video

@dakisunshine Год назад

Hello Colby, the tutorial was great! I was followig along but my local storage is, sadly, refreshing all the time. No error nothing, dont you know what it can be? Im using object aj state instead. Thanks!

@colbyfayock Год назад

strange! have you checked out the code? github.com/colbyfayock/my-welcome-banner also look at the pinned comment, React Strict Mode may be the cause

@dakisunshine Год назад

@@colbyfayock Ha! after two and a half hour I find that bug. It was React Strick just like you wrote, but I didnt know that it is in index.js. Thanks!

@suparnadey8294 Год назад

@@dakisunshine how did you avoid the React Strict?

@nitishvobilisetti4640 Год назад

How do we persist it if we change pages to a different link?

@colbyfayock Год назад

if you're on the same website, the state should be stored in localStorage and work wherever you're at. if you're talking about a different website, im not sure you can do that as that would be a privacy / security issue

@janjaoszynski9480 7 месяцев назад

idk why it doesnt work in my project :/

@colbyfayock 7 месяцев назад

did you check out the code? github.com/colbyfayock/my-welcome-banner

@annu4666 Год назад

Can anyone pls tell me why my Value is shown as [object Object] ? I have followed this video carefully and used it for saving the theme which was pre selected. Also, my useState looks like const [theme, setTheme] = useState('classicTheme'); where classicTheme and 4 more themes are defined in my themes.jsx file. The themes can be changed using a switch case. Also, removed strict mode from index.js :(

@colbyfayock Год назад

hey you're likely not using JSON.stringify() to store the value when setting it in localstorage

@annu4666 Год назад

@@colbyfayock thanks for replying! But I have used json.stringify and json.parse in both setitem and getitem

@colbyfayock Год назад

@@annu4666 hm not sure then, here's my code if you want to compare: github.com/colbyfayock/my-welcome-banner/blob/main/pages/index.js#L11

@annu4666 Год назад

@@colbyfayock Thanks! I will look into it