Save Client Placeholder with airSlate SignNow

Save client placeholder

hey guys hey going my name is dumb and today I want to talk about local storage within JavaScript so local storage is essentially the storage of data locally without using any PHP or anything server-side it's done purely within JavaScript and inside the actual web browser and it's actually stored specifically to the domain and the protocol being used so it's quite straightforward and it's um the data was stored using key value pairs it's also very easy to actually use so today we're going to make this right here it's a simple application where you have a key and value data entry when you insert some data for example let's just say occupation and we'll say web developer so a key and value pair here we press insert and appears right there if you were to change something for example say age and then we'll say instead of 60 we'll say 35 insert that gets replaced right there all right but first we'll look at how web storage sorry local storage actually works by itself so over here in this first document let's open up the editor right here okay so local storage is accessed using the local storage read-only property part of the window object so you can actually just say window local storage to get access to that property but since it's actually part of the window object you can simply just say local storage and that will give you the same thing now this property here actually gives you something called a storage object and will actually just log out here we'll just we'll just log out local storage alright so we'll save this one go in the browser to refresh all right and we see that right there this is the same data as this page that's because it's on the same domain YouTubed our local all right so it's shared across different directories even all right okay so if we just expand the prototype for this storage object we can see we've got a few methods here we have clear get item key remove item and also set item so we have data here what we'll do is we actually clear it so we'll say local storage and then clear all right press enter here we now refresh the page and now local storage is empty okay so let's see these methods now what we'll do is we'll actually just get rid of this right here all right and we'll actually add a key value pair to the local storage object so we'll say local storage dot set Iceland okay this method takes in two parameters or two arguments the first one being the key and the second being B value for example let's just say something like who named the key B value Dominick all right we'll save this one go in the browser refresh all right we'll just like our local storage down here press ENTER and we get that right there simple as that now if I get rid of this all right so now that's not there anymore if I save this and then refresh the browser we'll see you actually still get the key value pair in there so the paint was refreshed and the data remains persistent this works over years like you can do this code and then threes down the line come back and the code sorry does that also be that the data does not expire local storage stays there for as long as your computer or your web browser allows it to be all right so keep that in mind now we can use the remove item method to remove a key and value from the local storage so inside here we'll just type in local storage to remove item all right and then pass in the key so we'll say remove item and we'll pass in the name Romar's I'll just log out the local storage make it simpler all right we saved this one refresh the browser now we get nothing in the local storage all right so that is that it sorry that is um set item and remove item covered now gets item will give you the value when you pass in a key all right so let's go back inside here and we can add some more data so we'll say local storage dot set item we'll set the item of age and give it a value of 30 now keep it one right here local storage store stuff as string and then string so the key will be a string and the value will also be a string that's why I've got double quotes around that number there what so just say local stores and we'll add one more set item let's just pass him once again name and make that domine all right okay so now we're gonna log up local storage dot gets awesome and passing the age key okay save this one refresh your browser and we get 30 that is the value for the key of age now keep in mind right if I was to go inside here and instead of passing in the string passing an integer or a number for example 50 but now if we save this and just log out local storage on its own we actually see that that value gets converted to a string automatically so javascript assess our number now might make that a stream so it does it automatically for you that's that we also have the key method and the key method will give you the key when you passed in an index so forth we're using using these two once again if we'd like our local storage key and then pass in one we'll see what we get we'll save this one refresh your browser and we get named so behind the scenes here local storage says ages zero and name is one so you can actually access the keys by an index which can be very useful especially for looping through or your local storage all right that's the basics now let's make this guy right here alright so first we can begin by making those those two input boxes so up inside here what we'll do is we get rid of all this stuff actually to start off all right now down here we'll stay with a simple field set element here so I've set a field set the legend will be insert insert data all right now here we'll pass in or we'll just make those those two input boxes so we'll say input that stuff right there that is not required and give it an ID of something like input key all right also ace in the last little placeholder Enter key all right do the same thing for D value so I'll say int your key point value give it a place holder of enter value all right who also makes some basic styles make it look a bit nicer we'll say input give it some padding of something like seven pixels and also our height of something like 40 pixels now right so save this one refresh the browser and what do we get we get that right there perfect now for the button we'll just like a simple button give it a type of button a name let's change that to ID and give it an ID of BTN insert text we'll say insert data something like that say this one refresh the browser and what do we get we get that right there okay let's make that style apply to your button as well all right okay that's that one now for the part we actually have the data output this guy right here we can make that right now so we'll make another field set give it a legend something like local storage output maybe or just local storage all right inside here make a simple div and give it an ID of Alice output so he will have all the key value pairs out put it inside here okay once I give the fieldset a margin bottom of something like 20 pixels so it's like this one refresh the browser and what do we get we get that okay so now we're ready to actually do some JavaScript coding so inside the script section we can first get references to these four very important elements the first one being the key input source a make a new constant called InP key equal to the good old document dot get element by ID so it works get element by ID and pass in the InP key ID we'll do the same thing for the input value input box in blue belly and then iron p-value all right similar thing for the button so const BTN insert a bucket on the bar ID and then pass in bc an insert and the same thing for the local storage output actually an ID so div ID local storage output alright local storage output equals ID LS apple okay so now when this button gets pressed we want to actually add the key value pair to the local storage so we can do this by adding adding an on click listener or handle a to this button so we'll say PT and insert dot on click equals this function right here this function will be called whenever you click on that button so first we can actually get the key and value from these two input boxes so we'll make two new constants one called key equal to I and a key value and an extremely similar thing for the value so constant value because input value value so now we'll lock out key and we'll logout value when the button gets pressed on refresh here name and then Dominick press enter or in turkey name and Dominic perfect so now we're gonna put this inside the local storage but first we'll actually check if we've given some tests because we could actually just go blank we could just say yeah insert like insert and then do that but that's not what we want so we'll first check if we actually have some some text there so we'll say if P and value if those resolve to true both of them then we're good to go so we'll say local storage dot set item and passing key and then value now we can simply just refresh the page once that's done so we'll just say location dot reload simple as that save this one and refresh the browser we enter a key for example name and make that name something like Jeff alright we insert this the page refreshes if we see local storage we get storage we have their old age from from earlier earlier and also the name of JYP's that I worked alright we'll just clear this local story it's like clear make it all nice and neat all right clear that this time we obviously get nothing in local storage so now we can begin to populate this section right here so we can do this by simply looping through all the key value pairs and just putting it out there so we can start with a simple for loop we'll say for two letters I equals 0 and they will say I less than local storage dot link and that will give you a length of all the kilo pair so how many you've actually got inside I plus plus okay so I'm using I here and index I'm going to use the the key method on the local storage so it works perfectly so to actually get the key of one of these local storage entries we can first just make a new constant called key equal to u local storage and then using that same key method from earlier on will pass in ID all right we have the key we can then use the key to get the value so we make a new constant value equal to local storage dot get items and passing key so now we can simply just make use of this Alice output element here and we'll say Alice Apple dot innerhtml plus equals pin to that we're gonna append using a template literal here we can append to that and we can put in one of these guys all say key and then value inside here and then create nice little line break all right what's that get rid of this to make it cleaner and now it is all done so proceed this one refresh the browser this time if we insert a key for example name and the value of Domonic we answer that run right there and boom we get it inside there all right and that is how you can use local storage within JavaScript thank you for watching and I'll see