Learn localStorage in JavaScript by building a project!

hey welcome back to max programming and today we will see what is local storage in javascript and we are going to build a project regarding local storage so let's get started [Music] so uh in this video we will cover local storage as i told and the first thing we'll need is the starter files now we're going to build a simple project so here what you see is what we are going to build um and we are going to use local storage to store our data so you can enter a student name you can the age of this you can enter the age of the student and the role or the role number of the student and you can just click add student to add that student and that student will be added on the ui right over here restaurant will also be added on in the local storage so how can we check what is inside of the local storage well you can just go to right click and inspect and it's uh it's the same thing in firefox and you can just go to the application tab and in the application tab you can just go to local storage okay here is where you can see all the local stores now local storage is simple uh in simple terms local storage is just an object which is just you know a key value where's where you have a key and then you have a value for it okay and the value will be always a string so whatever you store inside of that object you know it will be any if you store an object if you store it away if you store true false numbers that will be added as a string okay and then when you get that item from the local storage it will be a string also so let's just try adding something so i'm gonna go to student name and i'll say the student name is my name swan and then i can go to the student age and let's add the age as 16 and the student role let's add it to be 36 and when i was to click add student you can see a student is added right over here and in inside of the local storage i have a key that is students and then i have this whole value and this is an array that holds these three properties okay okay so as you can see i have this as an array okay so this is an array and it holds three properties name age and roll and now if i was to refresh the page this data won't go because i get that data again from local storage that's how you use it right so this is how this is the introduction to local storage and if i was to add another stream so let's say it's going to be gym and then let's say it's going to be 16 also 16 and let's say it's going to be 20. so if i was to click on add student again another student is being added and if we go back to the dev tools we'll see that gym is added okay and if i was to refresh again you'll not see anything go so this is what we are going to build the html and css we are going to get it you can get it from my repository now we will not do the styling part and you know all the html stuff we are going to focus on the javascript so i want you to go to this repository and i'll leave this link in the description from where you can get all of these three starter files you can just you know get this and the whole code is inside of here uh that's what we are going to do so let's open up index.html and styles.css and will not open app.js because you know what we we don't want to take a look at that so let's just copy the whole html code and i'll open up vs code and i'll just create a new index dot html file and i'll paste all of that inside of here okay so let me just explain i have body of course and then i have a main tag which does nothing and then i have a form tag with an id of student form and then i have three inputs inside of that which has required and then also this is important we're going to use the name attribute okay so we have the name attribute we are going to use this in our javascript to get these inputs and then finally i have a button to add a student okay so that is our javascript and we you know link our css and let's just change this title to you know local storage tutorial okay and hit save and here we go now once that is done let's grab the css for this page so it's it's like this and uh you know what it's not actually needed to explain so let's just create a styles.css file and let's paste that so it's basically some styling you know some resets and then some the main tag and the student form and we're using grid right over here okay it's not a css tutorial so we are going to leave that once all of that stuff is done let's create an app.js and we are going to keep it empty for now and let's right click on the html file and open with live server so that will open it up with live server and the live server is the extension that i am talking about right over here so i can just search for live server and that will automatically you know that will automatically update our html and css and javascript when whenever we edit that okay so you don't need to go ahead and refresh the page whenever you save the file okay so you can just install this live server extension once all that is done and we have live server up and running here it is okay now we can see this uh you know this simp this small you know box because we haven't added javascript yet for this once that is done let's just close this up and let's close this tab and i'll leave this link in the description below for my repository and let's close that so we finally got everything set up right now so we got the html we got the css and that is it i hope let's get into the code so i explain you the html and let's control click this javascript file to go there the first thing we are going to do is we are going to get all the elements so let me just go ahead and say dom elements so a simple comment and let's get this this student form very first of all and as you can see we have an id of student form writer person so we can just say const student form is equal to document dot get element by id and then we can pass in the id which is student form now we got the student form very first of all and then let's uh get all of the uh you know we got all of these inputs and we also have this div with the class of students where we are going to store all of these students okay so let's get all of these inputs or instead of getting the inputs first let's get this students div first of all so i'm just going to say const students div and or instead let's just call it student's container and then i'm going to set it equal to document dot get element by id and we're going to say it's going to be um dot students because it has a class of students okay it has a class of students once you got that now let's get all of the um inputs okay and we added this name attribute we can catch all of the inputs very easily so i can just say const name input and then we can set it to the student form and we can say it's gonna be name okay so whatever is the name attribute which in this case is name right over here as you can see this name input will become uh we'll get this input okay so this is the parent student form and inside of the parent we have this name okay so this is how you catch some you know random this is how you catch the child elements of parent elements so now let's just get others so i'm going to say const age input which is going to be equal to student form again and this time is going to be age and const this is going to be roll input and let's set that to student form and it's going to be roll so we got all three inputs right over here we got all we got both of these things now we got all these dom elements now let's create an array so let's i'm just gonna say const students will be an empty array as of now okay we got the empty other and in this area we are just going to push when we add a student we are just going to push that element now let's create a function so i'm going to say const you can also use the function keyword but you know let's just use the latest javascript so i'm just going to say const add student and that will be equal to an arrow function like this and if you want this arrow like this i have a video on it you can just check it out i'll put that in the cards you are add student now this add student function will take in the name age and roll so these are the three parameters going to take and then it's going to basically push an object to this so this our student will look something like this let me just add a comment so this is our student will look like it will be an object and it will have a name property which will be a string anything it will have an age property which will be any number and it will have a grade property or not a great role property which will be a number also okay so this is how our student our one of the students will look like and you know this is how every student is going to look like so this is the pattern that we are going to follow inside of this array we are going to add these kind of objects so let's just add a simple object as of now so i'm just going to say an object and then the name property will be let's say usman and then the age property will be let's say 16 and then the roll property will be 36 now hit save now let's try to render out these students i mean let's put these students in the dom so how do we do that well let's create another function for that okay so let's keep this function unused as of now so i'm just going to say const create student create student element this function is simply a function that will create the student element okay so that will create a student element inside of our students div so let's see how we can do that the first step will be let's say const student div okay so we will say constitutive and then we're going to say document dot create element okay and then we have to pass in which element we want to create so let's just say div okay so this will be the container for each student okay so we're going to create this for each student and let's create another element and that will be student name so i'm going to name it student name and that will be document dot create element again and the student name will be h2 heading 2 and let's just you know copy and paste this and this one is going to be student age and this time it's going to be a paragraph tag and let's duplicate this and student role and this one is going to be p as well so we created four elements okay we created four elements and now we'll go over and we'll add something to those elements okay these four elements are created they are not in the dom but we are going to add something inside of these elements we are going to fill those so i can just say student name first of all dot inner text okay so we're going to add some inner text and we can say it's going to be student name like this and then we add a space and then we add the name property now this name simply comes from the parameter so we're going to have the same parameters inside of the create student element so we're going to accept the name to accept the age and the role very simple right or instead of these three like this we are going to accept an object which will have these three so basically in simple terms we are going to pass in an object instead of this create student element let's just say it's going to be student okay this is what we will pass okay inside of this create student element so this will be an object and this will be of type this okay so the student will have these properties it will have the name the age and the role what we are doing here is we are destructuring the name the age and this uh role okay so we will be basically destructuring these three properties so we don't need to do something like student let's say student dot student dot name and then you have to say student dot age and all that stuff you don't need to do all this you can just destructure the properties so you can just get all of the properties and then you can just use something like name that's how you do this okay so this is simple this structuring we got the student name dot inner text let's put the student age dot in our text that will be the same thing but it will have student age and we can put age and then let's create let's finally add student role dot in our text remember you don't set it equal to that you set the inner text that will be student role and we can concatenate role and these are the inner text now once we added the inner text these are not these elements won't show up in the uh in our app so we need to show them uh inside of our app so what we can do is we can just say student uh div okay and student div is this element right over here so we can just append we can append many elements so we can we want to append student name very first of all we want to append student age and then finally we want to append student role okay so this is going to be the form student name will be the first element student age will be the second one and student role with the third one so this is how you append so inside of this div we append these three elements that's all and finally we created this div so we have to append this div also to somewhere else so we can just select the students container if you remember if i click that you see students container is the div that we get wait a minute this should not be get element value this should be query selector because we are getting it from a selector right over here okay dot students okay so students container what you see and then this is the student's container and what we can do is we can just append child now we are using only one child okay we are appending only one element so we use a pencil if you want to append multiple elements you can use the append so it's going to be student div student div that's it hit save and this is our function okay in a nutshell what it does is it creates the elements it adds the inner text and it appends it that's what it does so for a better understanding i just added these three comments that you know say what they do now let's call this function okay so what we want to do is this uh students array this is an array so what we can do is we can just uh add a for each loop so i can just say students dot for each and inside of here i can do something like student and then i can execute an arrow function like this okay so this is how an arrow function looks like i can use and i get access to each and every student if i hover over this you can see the whole type of this okay so it's going to contain a name and age and a role and the string number number all this stuff so i can use this student and then i can use this whole function i can just copy and paste this directly so as i told you we are going to get the student object right over here and we are going to pass we are going to destructure the name age and role from that so what we can do is we can just replace this whole function with the create student element and we are not calling this function okay if you were to call this function it will um you know execute at real time we don't want that we are going to put this function name only so we are just referencing this function and when for each loop goes inside that function it will take in the student we are destructuring the student so we are taking the name agent roll we are creating the elements and doing all that jazz and it's done so let's hit save and let's take a look so i have a student name which is one right over here student age is 16 and role is 36. we got that done if i was to add another thing to our students array so let's just go ahead and add one more object so i'm just going to duplicate this and i'm going to say the name is going to be let's say john and it's going to be 18 and then let's say it's going to be 42 and then when you take a look you will get another when i save the file you see it renders out okay so that is done now we can just empty out this array that's it okay we emptied this array now we have this create student element now we can simply pass in the student and that will create the elements and that's it once you got that done now let's work on adding a student by you know the form okay so you know that we have a form we have this form okay we have this form and then we have this button which adds a student so what we can do is we can just say the student form and we can use an event dot on submit and that event will be an arrow function okay that like this so on submit is equal to an arrow function and then we can get an event parameter from this one so you got the e okay which is simply an event so the first thing we want to do is we can just say e dot prevent default now if you don't know what this stands for what this means basically this prevent default function prevents the default behavior of a form submission so let's try this out if i was to just you know comment this out and do nothing and if i was to fill anything and then you know it doesn't matter and first to click on add zone you'll see the page will refresh if i was to add student you will see the page refreshed and you have all of these properties which we don't need so how can we fix this uh stuff we don't want the page to refresh else all of our data will go away so we use this prevent default to tackle that and you don't need all this now okay now when i was to put anything inside of this form and then if i was to add the student the page will not refresh and as you can see i'm clicking this multiple times the page is not getting refreshed that's that's it okay that's what e dot prevent default does and once that is done now let's create a new student so the new student will be simply let's just create a new student and then right over here we'll use the add student function now we haven't actually put anything inside of this function yet but let's just call it so we call it and then we have to pass in three things as i told as you can see in the intellisense we want the name so let's just put the name but name will be name input so the name input is right over here this is the name input so we got the name input dot value okay so this is an input of course and then we have this dot value property which gives us the value let's add the age so that will be age input dot value and finally role input dot value that is done we created our student now this add student variable it's going to return us a new student let's do that so this adds trend will simply very easily as i told it's going to push a new student so let's just say it's going to be students array and let's say dot push and it's going to push an object okay and this object will contain name will be the name age will be age and roll will be roll oops okay so this name is this and then agent roll are these and these okay now the property in the key and the value name are you know similar so we can just get rid of this and we can just say name agent role and that will automatically detect it and finally let's just return it to return will return an object with the name age and role that is it okay that is it so we did all of this stuff we pushed the student and we returned it so we got the new student back okay now this new student will be of type this as you can see now finally let's just create the student element so i can just call the create student element again and i can pass in the new student and as you can see as i told this new student will go inside of this it will have name age and row it will create the student elements and that's it we got that done and then let's just put the name input dot value is equal to blank and let's do the same for edge input and role input now we got all of this stuff done and this is simply to you know make the inputs uh this simply to uh make the value of the inputs uh completely vanished okay so let's you know just clearing the inputs finally our whole app is done but it's done okay we can add a student so let's just try adding one you know with some dummy data and first to hit enter i can add a student i can add another student so let's just add another student with any dummy data and we added another string that's it but when we refresh the page they're gone so let's just add now let's add the local storage functionality that will be very fun it's very easy it's very easy so the first thing we want to do is we want to set the item okay so basically we want we want to create an object or we want to set an object so what we can do is we can just go inside this add student function so when we add a student before returning and after creating the student what we can do is we can just go ahead and we can say local storage we're using local storage and i can say dot set item this set item takes in a key and a value okay so the key as i told will be an object key and then uh a string value okay so just a name and then the value so the name for our item will be students we're going to create an array called students um i mean we're going to create an item inside of the local storage called students and then add a comma and then the value will be a string so we can just use the students array now in simple terms uh local.set item will convert this to an array as you know the students as you can see this is an array and set item will automatically convert it to a string but it's it's better to convert it to string right or there might be any problems in the future so let's just go ahead and if you want to convert an array to a string what you can use you can just say json dot stringify and then call that and then put the value okay so the value is students that is it so json.stringify will convert any object or anything just anything to a string okay that's it so we set the item whenever we add a student we set the item that's fine but when do we get the item we also want to get the item how can we get the item uh because whenever if i show you right now if i show you if i was to add a student let's just say me and then anything anything it has to click on add student that student gets added and if we also check in the application tab if i go to local storage that student is added as you can see the age is five and roll is six and name is so smart everything is working fine but when i was to refresh the page i don't see anything i just see nothing why is that even though i have the student inside my local storage because i have the student i have not got this student back okay i have not got the student back so how can i get that student back that's simple also what we can do is we can just uh you know go to the variable we created so these the students array and instead of putting this as an empty array because whenever we refresh this is an empty array okay this is nothing but an empty array so what we can do is we can just put local storage dot get item that's it and then you just pass in the key okay the key as you can see this when we set the item the key was students so let's just copy and paste this so get item students and that will return us a string this is where a lot of developers stuck get stuck okay so when you get the item it returns you a string so in the end the students will be a string as you can see when i hover over something it gives me the type of that thing so our students array will not be an array it will be a string so we need to convert this to an array right because that's not what we want we don't want the string we want an array so how can we convert this to an array well again we can use the json object so i can just wrap this inside of json dot parse okay this time is going to be the pass function and we can just put this inside of the parse function this will convert the sparse will convert any string or yeah this part will convert any string to any you know whatever object we have or whatever okay an array or whatever that will be whatever that string will be so now we can set or to an empty array okay why do i need this or well if something if i don't have this uh student's local storage item which i won't have if i'm visiting the site for the first time then i obviously want to set this to an empty array right that's it hit save and now what you'll see if we go back you'll see our student and this is in our local storage so i can just add another student with dummy data add student and this is added and if i was to refresh the page i still have that and that is instead of our local storage now let's just clear this so i can just go to this and i can right click and delete this and then now if i refresh all the students are gone but we still have this this this box we don't want this box so let's just go ahead and remove this box and it's very easy and how do we remove that well whenever you create the student element or whenever we do something else we are going to say students div students container i'm sorry so this is this student's container and the styles are added to this class okay start students we can say students container dot style oops dot style and then i can say dot display will be none uh actually this will not be none so we'll add a condition if the students dot length is equal to zero then it's going to be none else it's going to be flex okay what is this well this is a ternary operator i have a video on attorney on the turn on your operator if you want to check so we're just checking that it's just a replacement to if else so i have students dot length if it is zero so that means if it is an empty array the display of this container will be none so this container will not show up and else it's going to be flex which is the default thing that we have okay so let's just copy this and put it outside here okay so we also want to put it right over here hit save and i think we don't need it here it's fine if we don't put it here because we actually put it outside so let's just save that and let's go back to our web browser and now as you can see it's not showing up even though if i refresh any time so if i was to just add some dummy data if i was to add student okay so that didn't work okay that didn't work because i did not add this condition at inside this function because you know whenever you create a student element you check again and then you add this uh you know none or flex okay so that was one of the mistakes and let's go back and you see the student uh if i say refresh and let's clear this so i can just also go ahead and clear the whole local storage from there and let's add a student let's add another student and those will be stored in the local storage i hope this video helped you please like it share it to others and subscribe to the channel if you haven't already finally thanks for watching

Channel: Max Programming

Views: 2,558

Keywords: localstorage javascript, javascript, web development, html, css, js, javascript tutorial for beginners, javascript tutorial, javascript project, webdev, javascript localstorage, javascript localstorage array of objects, localstorage javascript get all items, localstorage javascript clear, localstorage javascript not working, js localstorage tutorial, browser local storage

Id: U693xrQKFy4

Length: 31min 14sec (1874 seconds)

Published: Mon Apr 19 2021