How to Use Local Storage in JavaScript

[@dcode-software]

Check out my similar video on Session Storage: kzbin.info/www/bejne/iKm4lGmQjNyanNk

[@guardian962]

I've been struggling with JS & localStorage for MONTHS. This video really helped me understand the basics in a way no one else has. Thank you so much! Definitely going to share this with anyone else struggling

[@luciusrex]

I google for a web dev concept, i find dcode, i click and watch. Once again, concise and with examples all in plain js, excellent work! Keep it up!

[@dcode-software]

Thanks mate! You're welcome.

[@farhanyousaf5616]

I love the simplicity and approach of demonstrating it.

[@dcode-software]

No worries mate 😁

[@farhanyousaf5616]

@@dcode-software You should do a more esoteric video on Server Side Events as an intro. And for fuller examples for the ral world, heck make it a course! I'd pay for it =) Have you played with Go?

[@DubZenStep]

For those who are getting the innerHtml error: watch carefully here 10:32. You are getting "null" because you probably set "lsOutput" as a class instead of an id of the div. If you want to use classes instead of id's, you can use "const lsOutput = document.querySelector(".lsOutput");"

[@YawiKey]

Two hours searching for this on StackOverflow and no answers, thank you 🙏

[@arshiasaleem5005]

Amazing tutorial. You made it so much easy and simplified. Thanks man. Keep up the good work.

[@dcode-software]

Glad it helped!

[@judaspriest33715]

Cleanest explanations on youtube hands down!

[@dcode-software]

Cheers mate!! 😁🍻

[@samuelrajh9755]

can you make a video on how to store checkbox checked even after refreshing the page in local storage please ?

[@AdrianaStAubyn]

have you found out how to do that? if so help a sister out haha

[@paulhorowitz3340]

@@samuelrajh9755 She asked you if you have found the answer yet. And if you have found the answer, could you please share with her.

[@samuelrajh9755]

@@paulhorowitz3340 oh thanks

[@samuelrajh9755]

@@AdrianaStAubyn $(function(){ $('[type="checkbox"]').each(function () { var $this = $(this), name = $this.attr('name'); $this.prop('checked', localStorage[name] === 'true'); }); }); $('[type="checkbox"]').on('change', function() { var $this = $(this), name = $this.attr('name'); localStorage[name] = $this.is(':checked'); }); $('input').on('change', function() { localStorage.input = $(this).is(':checked'); console.log($(this).is(':checked')); });

[@kshitizshah6685]

I am getting goose bumps from this channel.. Thanks a lot you teach extreamely good.. the best programming channel and u are great teacher. Sir please keep on uploading web-development lessons.. !!Love from nepal... BIG FAN

[@draganvidakovic4140]

Very good video about Local Storage. Clear and Direct.

[@MrPurpledin0]

Thank you. The most useful tutorial i could find. you're good at this

[@dcode-software]

No worries mate and thank you 😁

[@obonyoemmy]

Agreed.

[@ulaganathanmahadevan6254]

Simple and awesome demo! Easy to follow and very useful. Thank you!

[@dcode-software]

No probs mate 😁

[@vincenttok]

thank you dcode for making this video. it's really help to undestand more about local storage and how to use it using Javascript and your explanation is easy to understand for newbie like me who learnt to program for very first time so thank you again and have a nice day

[@bimalakamani7001]

I was looking for this video for months I got finally thank you very much

[@dcode-software]

Most welcome 😊

[@nguyendat4275]

The best teacher on youtube, respect!

[@chrissythompkin2089]

Great tutorial, you're a natural!

[@dcode-software]

Cheers Chrissy 😁

[@mrjeevy7720]

Really good explanation, cheers!

[@Moh_ha]

This was very helpful thank you man!

[@dcode-software]

No worries mate

[@ArchanaKumari-ci1sx]

Tip: Use autosave and liveserver for automatic saving as well as refreshing the page.

[@sdwhitesox8039]

Good, clear explanation. Could you please do a tutorial on how to perform a certain action if the user has visited the site before?

[@emilianomedinaespinoza8822]

awesome video, by the way what keyboard are you using? Sounds smooth and very comfy xD

[@ayen0449]

you're appreciated for this masterpiece. made this so easy to understand: THANKS

[@baseplate_462]

guy named DOM teaching us web development. Golden💀

[@umbertopolanco4159]

How can I keep adding to the same key more data? like if it was an Array that I keep pushing data to it.

[@josiahtobas9172]

Thanks a lot man, I'm currently looking for solutions of mimicking php sessions on the client side. Basically to really have separation of UI and Application layer logic. God bless.

[@dcode-software]

No worries mate, best of luck!

[@jogoeire]

Nice straightforward tut.

[@rumeysamert8373]

question: do the items show up on the screen once you close the tab and open it again later? I know that he said that it would be saved in the local storage and stay there for a long time but I still wanted to ask.

[@mahmoudfarghly2970]

Yes

[@akshayrc]

Very well explained and demonstrated.. Thanks!

[@ercntreras]

A complete explanation and very clear. 🙏🏼

[@ankitkumarjat9886]

I know the basic things in html css and javascript but I want to learn in more deep like I learn fieldset tag here can you suggest me some source to learn and your videos are awesome. Love from india ❤️

[@phodzonditsheni7914]

Great Video. Keep it up🔥🔥

[@rioma3112]

Thanks man. This is a very good tutorial. Give this man props 👏🤝

[@inayathkhan100]

Very useful tutorial, you'r the BEST!

[@niloofar9113]

This was awesome! Thank you for the simplicity~ :)

[@adrianibarra9589]

Thanks man!!! This really helped me finish my project! Great tutorial

[@dcode-software]

All good! 😁

[@el9delcielo]

i was expecting more than ONE item at the end. Given how you made a loop and all. Would also like to know why you would declare all variables as cons instead of just var? Other than that, great video. Thank you

[@samcodes2912]

love the explanation. straight to the point 👍

[@lightcode6487]

So the value stores in LocalStorage but nothing is displaying on the page..

[@tjmcode5187]

sir please how does the localstorage function when you host the website.

[@Jc-handle-with-care]

Thanks that s an amazing tutorial! i really hope you re a teacher , you got skills!

[@mauriciozapata3859]

anyone else getting a cannot read property 'value' for the button onclick function? where is value being declared? I"m only getting the error on the const key = inpKey.value but not on the Const value = inpValue.value. Very strange

[@Mohammad-lu1pp]

thank u so much, that will help improve my project a lot

[@d0ma1n]

Hi, is it possible to put function in localstorage that will load when it redirects to other page? I have a button on index.html and it needs to redirect on other page, and invoke a function, or button that has a function? Thanks

[@adagordon7029]

Thank you very much for your lesson, it's pretty laconic & clear!

[@Raazor2232]

Oh that upward inflection at the end of sentences. A fellow aussie

[@dcode-software]

Loool

[@codermans2350]

is there a way to add the values from local Storage?

[@lonewolfcoding5208]

yes it works but i need more storage like sqlite and i want to access internal storage of phone

[@asmapatel6127]

If I have live chat integrated with my app, can I store values from that live chat and somehow display it on my app page?

[@FlexOffenders]

Great video ! Thanks for the help.

[@dcode-software]

No probs mate!

[@FrostDrive]

When I put console.log(localStorage); in the console, or try any methods, I just get undefined

[@lulusaikou221]

Useful~ Thanks for teaching❤

[@adityajha1889]

i have a question dcode. What happens when you add another name. Does it replace the other one or does it add another one

[@DeRhazzify]

How can you save the positon of drag & drop objects in localStorage? For example when you move a note on a board and then save its new location when you reload.

[@user-pg5xz3lq5i]

You are great teacher Thanks a lott

[@dcode-software]

No problem ☺️

[@MrAer85]

Got it working! Awesome!

[@doston38]

Hello bro, this is a very useful course. thank you

[@dcode-software]

All good bro!

[@priyaphilip5979]

hi Your video was very helpful, though I have a problem...I didnt get the last line of the code and on VSC i didnt get the output as well(displaying on the div tag)...

[@SuPaMaNallday]

FYI: Another way to add local storage and clear them (no code required). 1. Open Dev Tools(f12). 2. Select “Application”. 3. Select “Local Storage” (located under the Storage section). 4. Select Select the domain name that your on. 5. Right Click underneath the “Key” field. 6. Select “Add new” to enter a new key followed by a value. Or Select delete to remove and clear your storage. 7. Above value there’s a cancel icon you can click on to clear all of your local storage.

[@umbertopolanco4159]

Thank you very much for sharing your knowledge. This helped me greatly. Do you have a video for the same but for server side?

[@freekiad1931]

Thanks for the video, and My question is that, We take permission from the user for Read External Storage Data, and when I run this app in my device it asked me for permission but I want to know that when I gave permission to Mobile App read my data, so where and how app developer can read or see user mobile data ? Is that user data storage on my online storage server ?

[@Venkatnemala]

is it possible to fetch data localhost using inspect element

[@ragunath7950]

Final in inner.html is it essential to use $ for key and value symbol there.

[@chadrackkyungu2167]

thank you it's was helpfull

[@sumi-p5660]

How do i get unique id in localstorage?

[@henilpatel9249]

Hi, I recently came up with some questions. So when you stored the user input in the local storage and then output it on the screen. - Can we do that with multiple users' responses, and if so, will all that users' data get deleted after refreshing or closing the webpage. - How do we prevent the data from getting deleted everytime we refresh the webpage or close the tab and come back in to see if the results are still stored in. Please help me with those 3 questions

[@tunglam1321]

Great Video and Thank you! I have some question here want to ask. I want to know why it is worked on using const in the JavaScript assigning the variable, in my knowledge const means assign the variable one time only, but here is running the loop, so it shouldn’t assign one time only. I want to know where is my confused concept in const

[@angelcaru]

It isn't actually asigning It multiple times. Because const is block scope, It creates multiple constants

[@hopehope5064]

Thank you a lot you really came through

[@siddharthjadhav3920]

Hi , how to read key for google.com. I tried but i am unable to get value for the google website. Please help

[@lingsike3193]

Hi I have a question about this tutorial. When I did the last step as "output.innerHTML += `${key}: ${value} `;" my console shows innerHTML as property undefined innerHTML as null. I added if state to check document.getElementById('output') !== null error went away but the div id ="output" won't show any date being added to localStorage

[@dcode-software]

Hey there, can you post your code? I'm struggling to understand

[@user-pd1bq6qv9b]

Add the whole script in windowonload=function{ Your whole script }

[@lunleong4438]

How to get the update data after update the existing value in the localstorage without reload page?

[@ellanteladar1990]

Sir dcode how do I create a remove button for localStorage.removeItem()?

[@murgan4307]

In local storage already into mark is there you can see that one

[@abhisheaka3277]

Thanks man! , can you explain how can we update and delete the data which we entered?

[@jimh7604]

When I insert a key and a value and press insert I get a window reload and the Local Storage fieldset doesn't get updated. Why is that? If I remove location.reload only then it works fine.

[@noobCoder26]

thanks for the video

[@Rs-nh7zx]

Great tutorial! Just wondering, how can I remove items with a button ? Like remove button ?

[@legendarymc9384]

It works but for temporary.

[@martinkarugaba]

Thanks man.

[@deki90to]

when I type location.reload(); it keep realoding the page, why?

[@ragtop63]

Would localStorage be the proper way to store table data? For example, imagine you wrote a script that parses certain pages you browse for specific data. It takes that data and puts it into CSV format with the intent that it can later be read and placed into an HTML table. The amount of rows for the table (CSV) can be over 1000 rows. Is localStorage an acceptable solution for this scenario or is there a better method?

[@aryanheravitalemi8293]

Very helpful, thank you

[@dcode-software]

You're welcome!

[@lightcode6487]

So That means the input you're going to create is going to be saved to the localStorage and in your code, it will also display on the page. What if I refresh it? Will the input still be displayed? And nice video!

[@Andrii87]

does data go away, when you close browser?

[@mastercode7851]

great stuff , thanks bro

[@sounak2009]

Hi Dom.. The localstorage doesn't work on file protocol right?

[@cafelutsa_]

what if i want to store more names?

[@paulmonde6896]

Great ! Thx man.

[@dcode-software]

No problem! Glad you enjoyed

[@rahulsharma7990]

outstanding

[@amjadshadid90]

great video, thank you

[@dcode-software]

You're welcome

[@dan112in69]

nice explained. thx

[@didziszvaigzne7679]

What theme are you using?

[@sallylauper8222]

I can has save file?

[@kamola9142]

Thank you

[@yuvrajkorotana7631]

How to display changes made in one webpage to reflect in the same webpage open separately like a comment box.

[@yuvrajkorotana7631]

?

[@mohammadbelalalzoubi8102]

It is great. Thank you.

[@dcode-software]

All good mate cheers good to see it helped you!

[@mrfrontend1]

💥🔥

[@jvnxs7]

Nice video, thanks

[@dcode-software]

You are welcome.

[@tdreamgmail]

Great explanation! Just one question. When I add a few items in, it starts adding them at index 1 (2nd position), so everytime I add something, the list gets more unorganised. Why is this? Or how can one sort it?

[@dertuman]

Local storage items get automatically indexed by alphabetical order!

[@saisrisai9649]

Thank you so much.

[@abrarmansouri2746]

Why did you use location.reload? What's the purpose of it?

[@dcode-software]

It's just a way to refresh the page in code. For the purposes of Local Storage, it's not too relevant but I just used it in the video for convenience

[@truedivan]

Hello! Thsnk u for tutorial =) What is that record mean - ${smth} ?