How to Use Local Storage in JavaScript
Вставка
- Опубліковано 1 сер 2024
- By using Local Storage in JavaScript, you are able to store simple data persistently for your web application directly through the web browser itself - no PHP needed!
Data is stored using key-value pairs, string-string. This makes it more than capable of storing basic data which is the intention and recommended use of Local Storage.
I wouldn't recommend using Local Storage for large scale applications because even though the data is persistent, it isn't guaranteed to stay there and is only specific on that particular machine.
In this video I show you the basics of using Local Storage as well as a mini application that prints out the data stored inside the Local Storage.
For your reference, check this out:
developer.mozilla.org/en-US/d...
0:00 Overview
1:30 Looking at the JavaScript
3:05 Adding data to Local Storage
4:20 Removing data from Local Storage
4:52 Getting data from Local Storage
6:28 Exploring a few extra methods
7:16 Creating the input form
14:58 Wrapping up
Follow me on Twitter @dcode!
If this video helped you out and you'd like to see more, make sure to leave a like and subscribe to dcode!
#dcode #javascript #webdev
Check out my similar video on Session Storage:
ua-cam.com/video/RxUc6ZWwgfw/v-deo.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?
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
Amazing tutorial. You made it so much easy and simplified. Thanks man. Keep up the good work.
Glad it helped!
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
Simple and awesome demo! Easy to follow and very useful. Thank you!
No probs mate 😁
Thank you very much for your lesson, it's pretty laconic & clear!
Cleanest explanations on youtube hands down!
Cheers mate!! 😁🍻
The best teacher on youtube, respect!
Thank you. The most useful tutorial i could find. you're good at this
No worries mate and thank you 😁
Agreed.
Thanks man. This is a very good tutorial. Give this man props 👏🤝
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 🙏
A complete explanation and very clear. 🙏🏼
Great tutorial, you're a natural!
Cheers Chrissy 😁
Very good video about Local Storage. Clear and Direct.
Nice straightforward tut.
love the explanation. straight to the point 👍
I was looking for this video for months I got finally thank you very much
Most welcome 😊
you're appreciated for this masterpiece. made this so easy to understand: THANKS
Very well explained and demonstrated.. Thanks!
Really good explanation, cheers!
This was awesome! Thank you for the simplicity~ :)
Good, clear explanation. Could you please do a tutorial on how to perform a certain action if the user has visited the site before?
Thanks man!!! This really helped me finish my project! Great tutorial
All good! 😁
Thanks that s an amazing tutorial! i really hope you re a teacher , you got skills!
This was very helpful thank you man!
No worries mate
Useful~ Thanks for teaching❤
Very useful tutorial, you'r the BEST!
Great video ! Thanks for the help.
No probs mate!
great stuff , thanks bro
Thank you very much for sharing your knowledge. This helped me greatly. Do you have a video for the same but for server side?
Got it working! Awesome!
thank u so much, that will help improve my project a lot
Thank you a lot you really came through
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.
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'));
});
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.
Great Video. Keep it up🔥🔥
Oh that upward inflection at the end of sentences. A fellow aussie
Loool
nice explained. thx
thank you it's was helpfull
Hello bro, this is a very useful course. thank you
All good bro!
Tip:
Use autosave and liveserver for automatic saving as well as refreshing the page.
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
thanks for the video
Great ! Thx man.
No problem! Glad you enjoyed
It is great. Thank you.
All good mate cheers good to see it helped you!
Thanks man! , can you explain how can we update and delete the data which we entered?
Very helpful, thank you
You're welcome!
You are great teacher
Thanks a lott
No problem ☺️
Great tutorial! Just wondering, how can I remove items with a button ? Like remove button ?
Thank you so much.
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)...
Thanks man.
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!
How to get the update data after update the existing value in the localstorage without reload page?
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
How can I keep adding to the same key more data? like if it was an Array that I keep pushing data to it.
Hi Dom.. The localstorage doesn't work on file protocol right?
great video, thank you
You're welcome
is there a way to add the values from local Storage?
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
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?
Final in inner.html is it essential to use $ for key and value symbol there.
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
is it possible to fetch data localhost using inspect element
Nice video, thanks
You are welcome.
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
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 ❤️
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
Hi , how to read key for google.com. I tried but i am unable to get value for the google website. Please help
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?
awesome video, by the way what keyboard are you using? Sounds smooth and very comfy xD
Hello!
Thsnk u for tutorial =)
What is that record mean - ${smth} ?
guy named DOM teaching us web development. Golden💀
outstanding
sir please how does the localstorage function when you host the website.
When I put console.log(localStorage); in the console, or try any methods, I just get undefined
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?
Local storage items get automatically indexed by alphabetical order!
i have a question dcode. What happens when you add another name. Does it replace the other one or does it add another one
So the value stores in LocalStorage but nothing is displaying on the page..
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 ?
Thank you
What theme are you using?
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
}
when I type location.reload(); it keep realoding the page, why?
yes it works but i need more storage like sqlite
and i want to access internal storage of phone
does data go away, when you close browser?
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!
How do i get unique id in localstorage?
what if i want to store more names?
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
Will this work as a live chat 💭? Like document.body.innerHTML += localStorge.whatever?
You can put almost anything on the DOM. The contents of localStorage need to be parsed into js objects and you can retrieve the data from that object using the dot operator.
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
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.
💥🔥
GREAT
Im getting localStorage.key isnt a function
how do you fix this???
input, button {
padding: 7px;
height: 40px;
width: 200px;
}
fieldset {
margin-bottom: 20px;
margin: 200px;
}
Insert Data
Insert DAta
Local Storage
const inpKey = document.getElementById("inpKey");
const inpValue = document.getElementById("inpValue");
const btnInsert = document.getElementById("btnInsert");
const lstOutput = document.getElementById("lstOutput");
btnInsert.onclick = function(){
const key = inpKey.value;
const value = inpValue.value;
if(key && value){
localStorage.setItem(key,value);
location.reload();
}
};
for (let i=0; i < localStorage.length; i++){
const key = localStorage.key(i);
const value = localStorage.getItem(key);
console.log(key);
console.log(value);
lstOutput.innerHTML += key +" : " +value +'';
}