LocalStorage for beginners (HTML and Javascript)

what's going on my name is Jay and in this video I want to show you how you can use a local storage for your website or web app if you don't know what local storage is is that is him you can store data in your browser so you can have local data and then you can use it later so I'm gonna work here with a very simple example but I think from here you can understand and you can use and go crazy so here I have a simple text field as you can see here and I can write whatever I want so my goal is every time I write something here I want this text to change and then if I save it I can reload the page a hundred times and it's gonna stay there the same text is that you're saving that in your browser and you're never gonna lose it so let's go ahead and take a look at the HTML here as you can see very simple I just have one input it's just an input text I added some classes so you can reuse can use it later with JavaScript there is just a regular paragraph if the text here and then a button that is just to save the local storage all right I have my JavaScript file totally empty right now so I'm gonna start adding some code so right now let's start by adding some variables so I'm gonna do Const let's call this the storage input you can call it whatever you want umm storage input this is the input text that we're going to use this is going to be equal to document Chris elector doctory selectors right here and this is a class of storage so we can use that so storage all right um let's close this so we can have a little bit more space okay let's create another variable for the text just a regular text so let's do the Const let's call it text equals to same thing document dot crease selector and this class is text all right and I'm gonna create another one for the button so let's call it button you can call it whatever you want remember query selectors same thing and this one is button all right I think we're good for now we're gonna add another one later but let's make sure this is actually working so what I'm gonna do is I'm gonna add an event listener that is listening to this input and every time I write something this text is going to change so let's see if that works all I have to do is get this input to lists a storage input dot add event listener and there's going to be input and here I'm gonna use a fat arrow function so let's do letter this can be whatever you want it doesn't have to be a letter but I don't know for me it makes sense um every letter that I write the value will change all right so now what we're gonna what we want to do we want to change the text every time you we write so let's do text which is this variable up here that we created I want to change the text inside that so text content is equal to whatever I write so how do I get that we go to letter which is this right here dot target dot value and this is how we get that specific value all right now I want to make sure this works so let's save this and let's see actually really works all right let's see here hello world and there he goes is that simple so I know if you're confused about this like little letter target value lets console.log something let's console lock letter let's see how that looks all right and here you go so he's gonna give you the input event if I open this and I keep scrolling scrolling scrolling you will see target if you open target you can keep scrolling and at some point you will see value and you can see value is the H so right now if I cancel lock all this vant a letter target value I'm going to save that let's take a look at this yep so every time I put a new letter that value is updating right so now our value is this one and that's all I want us this is perfect all right so I hope that helps you understand what the lettered off target value is coming from all right I'm gonna remove the console.log okay so now I'm gonna create the function - every time we click safe whatever is here is gonna get saved to our local storage so let's go ahead and say Const let's call it save to local storage this function you can name it whatever you want all right I'm gonna do the same thing of fat arrow function and here I'm gonna do this local storage just like that dot set item all right and this is actually how you save something to local storage now what do we want to save all right some quotes this is the name of that specific local storage that you want to save whatever you want to save here I'm gonna call it text input it can be whatever you want coma and what's the value of that what do you want to save so I want to save text dot which is this text right here text content that's all I need is just only is a string is this text all right now that we have that function we need to use it when I click the Save button so let's go on this go down here and let's say button at eventlistener this one's going to be a click and what do we gonna do after that click we're gonna do a function wish function save to local storage which we already have here alright so I'm gonna save that hopefully that works so I'm gonna write something here hello world I'm gonna click Save all right and nothing happened how do we know that this works where is local storage where is it so I'll open your inspector and if you go here you can see that you have application go to application and here we go so you'll see local storage session storage so open local storage opened at that specific domain mine's localhost right now and here you can see text input and the value is hello world so what I'm gonna do to test it I'm just gonna change it to hello you or something like that I don't know I'm gonna click Save and now we change to hello you so now that's our value so let's reload this page and you can see we'll still have that local source the hello used there so we can use it so right now we save that and we can use it remember every time you do something and click the save is going to replace it but if you really reload the page it's gonna be there so we can use it so what I want to do every time I go to this page I want this text to be whatever is in here if only exists so if is true if we have that local storage called text input put it here if we don't then nothing happens so I'm gonna go and create a variable up here Const store it input is going to be equal to local storage dot get item all right this is how we get something from local storage okay now what's the name is text input here you go so right now I have that local storage I mean I have that variable and now I want to say okay if that variable exists put it there so I'm gonna do an quick if statement I'm gonna say if storage input and this is gonna be is this is just saying like if storage input is true right then do this text dot text content equals to what to starch input all right let's save that woops sorry is not storage and input I hope you saw that it's stored sorry stored input all right let's save that now and now you can see we have the hello let's change it to hello world safe you can see hello world we can reload the page and we have the hello world there forever okay until you remove the data or you can actually do it with JavaScript you can remove this local storage you can delete the data from your browser and then it's not there or you can replace it I can say hello I'm gonna save it never sale oh now I can reload the page a hundred times and we still have the hello so this is kind of starting you can do a to-do list I don't know a your own local grocery list you can use this for a lot of things okay it doesn't have to be only one regular string like this it can be a whole object with a bunch of data I think the limit is like five megabytes now you can have so I hope this helps to get you started and get you creative and that's it subscribe if you want to keep learning and click on the bell icon to receive notifications every time I upload a new video thank you so much for watching have a beautiful day bye bye

Channel: iEatWebsites

Views: 22,788

Rating: 4.9446368 out of 5

Keywords: localstorage, localstorage javascript, how to use localstorage, localstorage for beginners, localStorage, localstorage for website, using localstorage, localstorage tutorial, javascript, javascript for beignners

Id: rVyTjFofok0

Length: 12min 26sec (746 seconds)

Published: Sat Feb 01 2020