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
@@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?
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");"
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
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
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.
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 ❤️
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
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.
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
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!
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.
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
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)...
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
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 ?
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?
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.
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
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
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.
This takes advantage of the ES2015 feature, Template Literals and the ${ } means that it's a placeholder for an expression - so essentially it lets me output the value of the property rather than a dollar sign and a few curly braces. Learn more here developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals
Check out my similar video on Session Storage:
ruclips.net/video/RxUc6ZWwgfw/видео.html
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
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!
Thanks mate! You're welcome.
I love the simplicity and approach of demonstrating it.
No worries mate 😁
@@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?
Cleanest explanations on youtube hands down!
Cheers mate!! 😁🍻
Amazing tutorial. You made it so much easy and simplified. Thanks man. Keep up the good work.
Glad it helped!
Thank you. The most useful tutorial i could find. you're good at this
No worries mate and thank you 😁
Agreed.
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");"
Two hours searching for this on StackOverflow and no answers, thank you 🙏
Simple and awesome demo! Easy to follow and very useful. Thank you!
No probs mate 😁
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
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
can you make a video on how to store checkbox checked even after refreshing the page in local storage please ?
have you found out how to do that? if so help a sister out haha
@@samuelrajh9755 She asked you if you have found the answer yet. And if you have found the answer, could you please share with her.
@@paulhorowitz3340 oh thanks
@@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'));
});
The best teacher on youtube, respect!
Very good video about Local Storage. Clear and Direct.
I was looking for this video for months I got finally thank you very much
Most welcome 😊
Great tutorial, you're a natural!
Cheers Chrissy 😁
Good, clear explanation. Could you please do a tutorial on how to perform a certain action if the user has visited the site before?
This was very helpful thank you man!
No worries mate
Tip:
Use autosave and liveserver for automatic saving as well as refreshing the page.
you're appreciated for this masterpiece. made this so easy to understand: THANKS
Really good explanation, cheers!
guy named DOM teaching us web development. Golden💀
Nice straightforward tut.
awesome video, by the way what keyboard are you using? Sounds smooth and very comfy xD
A complete explanation and very clear. 🙏🏼
Very well explained and demonstrated.. Thanks!
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.
No worries mate, best of luck!
Thanks man. This is a very good tutorial. Give this man props 👏🤝
Oh that upward inflection at the end of sentences. A fellow aussie
Loool
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 ❤️
Very useful tutorial, you'r the BEST!
You are great teacher
Thanks a lott
No problem ☺️
Thanks that s an amazing tutorial! i really hope you re a teacher , you got skills!
Thanks man!!! This really helped me finish my project! Great tutorial
All good! 😁
thank u so much, that will help improve my project a lot
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
This was awesome! Thank you for the simplicity~ :)
Hello bro, this is a very useful course. thank you
All good bro!
Got it working! Awesome!
Useful~ Thanks for teaching❤
Great Video. Keep it up🔥🔥
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.
Yes
Thank you very much for your lesson, it's pretty laconic & clear!
thank you it's was helpfull
love the explanation. straight to the point 👍
thanks for the video
Thank you very much for sharing your knowledge. This helped me greatly. Do you have a video for the same but for server side?
It works but for temporary.
Great video ! Thanks for the help.
No probs mate!
Thank you a lot you really came through
Thanks man.
is there a way to add the values from local Storage?
Very helpful, thank you
You're welcome!
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
It isn't actually asigning It multiple times. Because const is block scope, It creates multiple constants
outstanding
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!
nice explained. thx
How can I keep adding to the same key more data? like if it was an Array that I keep pushing data to it.
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.
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
Hey there, can you post your code? I'm struggling to understand
Add the whole script in windowonload=function{
Your whole script
}
Great tutorial! Just wondering, how can I remove items with a button ? Like remove button ?
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)...
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
great video, thank you
You're welcome
So the value stores in LocalStorage but nothing is displaying on the page..
Great ! Thx man.
No problem! Glad you enjoyed
Thank you so much.
great stuff , thanks bro
Thanks man! , can you explain how can we update and delete the data which we entered?
When I put console.log(localStorage); in the console, or try any methods, I just get undefined
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 ?
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?
sir please how does the localstorage function when you host the website.
Nice video, thanks
You are welcome.
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.
yes it works but i need more storage like sqlite
and i want to access internal storage of phone
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?
It is great. Thank you.
All good mate cheers good to see it helped you!
Final in inner.html is it essential to use $ for key and value symbol there.
Thank you
How to get the update data after update the existing value in the localstorage without reload page?
when I type location.reload(); it keep realoding the page, why?
i have a question dcode. What happens when you add another name. Does it replace the other one or does it add another one
Sir dcode how do I create a remove button for localStorage.removeItem()?
In local storage already into mark is there you can see that one
is it possible to fetch data localhost using inspect element
Hi , how to read key for google.com. I tried but i am unable to get value for the google website. Please help
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
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
💥🔥
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.
does data go away, when you close browser?
Hi Dom.. The localstorage doesn't work on file protocol right?
How to display changes made in one webpage to reflect in the same webpage open separately like a comment box.
?
I am facing error "Uncaught TypeError: Cannot set property 'onclick' of null" while i am just following your code for practice.
Make sure you have the element. Check and ensure your IDs match up
the way you named every variables makes students confused
looool. The explanation is great, the video is very helpful, but yes, I thought the same thing, not so sure about the variables names ... haha
use your own variables, its harder but it helps connect things, that way you can not just typing what you see, you also need to think what you type
How come I find that now?! What a life saver, it is exactly what I needed! Thank you!
How do i get unique id in localstorage?
what if i want to store more names?
why do you use $ sign in: '${key}'?...
This takes advantage of the ES2015 feature, Template Literals and the ${ } means that it's a placeholder for an expression - so essentially it lets me output the value of the property rather than a dollar sign and a few curly braces. Learn more here
developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals
its basically jquery
Oh hey. I'm Dom too.