How to Use Local Storage in a JavaScript Web App

all right in this video let's talk about storing information in the browser it will be probably a lot easier to talk about this without apps script environment and then maybe by the end i'll move it to apps script so you can see how it works together but for now let me just leave this alone and open visual studio code and let's just create an html file in here and i'll just do exclamation tab to just start the main file i'll call this test go to the body and in here let's just create an input element and a select box so i'll do input type text and then also select box which is basically a drop down with some options and finally let's just give these things some ids and i'm going to start a script is where we're going to write our javascript so for now let's just load this to see what this looks like so basically we have a text box and a drop down so there are many reasons you may want to store something in a browser it could be that it's some user settings it could be that you just have a long form and you don't want people to lose what they have in their form if they accidentally close the browser and reopen it it could be for like google analytics you have basically some sort of id that you use to figure out it's the same person that returned to the website so there are tons of different reasons to have this but i'm just gonna go with a simple example let's say we have this form and somebody goes in here and chooses orange now if i go ahead and close this and then we go back and reopen that form we're going to lose everything we had in that form so it might be a good idea to have certain things to stay with the setting that the user last picked so if the last one that was selected here was orange maybe the next time if we close this and reopen this we would like that to just be orange now to do something like that we basically need to store something in the browser and for that we're going to use local storage so let's just do an example of that so i'm going to go back to my code and let's write some code in here so i'm going to create a function and this function is going to run when the page loads and to do that we'll just do document add event listener and when the content loads we'll just run that function called page load so now let's say every time we select something in this select box we'd like to store something in a browser so we can retrieve it later on and to do that we'll just assign an event listener to this every time we select a different option so we'll get this select by its id and we'll add an event listener to that and every time we change that select box we're going to run a function so i'll just call this function after change so let's go ahead and create that function here let's pass an event here so we can get some information about that select box and here right now let's just console log e dot target dot value so i'm going to save this let's go back to our browser here so i'm going to open the console as you can see there's nothing happening in here at the moment let's just put it in here so we can see what happens so i'll just go ahead and choose apple and as you can see we log apple if i go banana we lock banana so basically we get the value out of this select box and we do that by basically the e target refers to that element and we get the value out of that element and we have this e is because this is an event assigned to this change of this particular element so now we can take that and store it so the way we can store it we can take our local storage and in this local storage we can set and get items so we're going to start by setting item and basically we have two pairs we have the key and the value so the key is some name some unique name you want to choose so i'll just call this fruit i don't want to call it product because i don't want you to confuse it with this and then the value i'm going to choose for that is gonna be the value we get from here let's just comment this and save we get the icon we don't have it which is fine i'm gonna clear that so right now what i want to show you let me actually move this to the bottom in here if i go to storage see we have our cookies we're not going to be using cookies we're going to use local storage this one let's actually click on this so you can see there's nothing going on in here now let's go ahead and pick something in here so i'm going to choose banana and then let's just go back and reopen this so as you can see i got the key fruit and the value is banana and let's just change this to orange and if i go back here see now it's orange now what's going to happen if i close this whole thing and reopen it and go back and take a look at my console under storage you'll see that this value stays here even after closing the browser and reopening it so now we should be able to use that value when we actually need one so the way we can do that we now have this under this key fruit so if i go back to my visual studio code what i can say is when the page loads let's go get the value from the local storage so we'll do this time instead of set item we'll do get item and the item we're trying to get is the one that's called fruit which we essentially named over here and at this point we can check what's happening in this fruit so let's just cancel log that fruit so this is going to happen when the page loads so if i go back now and reopen our browser and we just refresh this see it says orange now you can see this says apple but the value here is the value that was stored it's orange now the other thing we want to test is what happens if we actually try to get something that doesn't exist so i'm just going to do this i'm gonna remove the t save this go back and reload the same thing so as you can see we get no so now what we can do we can say if that fruit exists so basically if it's not null then we can do something so what we could do we could grab this element on our page and set the value of that to be the fruit so if we already have that in our local storage we'll just make the value of the drop down that fruit so if i save this we go back see as i'm reloading this it's orange if i change this to banana if i refresh it's still banana if we close this go back and reopen this it's still banana so we're grabbing the value and setting that in here automatically the next time apple again if i reload it will stay apple see now we're keeping that value now we could have done the same sort of thing with this input box as well so maybe we want to basically store whatever's in this input box so that basically if we close this and reopen we'd like that to stay in the box now it doesn't stay right now because there's nothing telling it to do so so again what we could do we could create another event for that input box this one right here qty so i'm going to copy paste that and do qty as the event well the id not the event and the event will be input for our input box and then i'm going to call it after input as the function and we're going to create that function and i'm just going to copy this function and paste it and yet again what we'll do we'll take the value of that target element and store it and we'll give it a different name qty so now every time we type in the box with every key which is our input event we'll basically just grab the value and store it in this qty and then we should be able to retrieve that value the same way we did this one so i can just copy paste this and say let's try to grab that qty and we'll name the variable the same and then we'll say if it exists so then we'll make our quantity box equal to that now you could definitely do some refactoring here to not have to repeat all this code multiple times but that's not the point of this video anyways so i'm going to save this and let's go back and check this out so i have orange let's change this to banana let's type 77 so now i'm gonna go ahead and close this apparently this one too and let's just reopen this and as you can see we got our 77 and banana if i add another nine close this reopen that we're saving that in our storage and then we're retrieving that now remember one thing that all of this is stored in the current browser so what that means is that right now if i'm using firefox if i go to chrome to that same link it's not going to be available let's test that so if i copy this open the chrome browser and let's just paste it in here so as you can see that doesn't load here now chrome will have its own storage so that means that if i now do something in here and then we close this and reopen it it will keep that value in chrome but again this is separate for chrome separate for firefox each browser will have its own storage which also means if you go to a different computer you know it's not going to have it stored so basically storing it in the browser itself for that particular user so now let's take this logic and apply that same logic here in some sort of web app in our spreadsheet and for this i'll just do some sidebar it really doesn't matter you're gonna find in a second that i'm gonna be using pretty much the same code so i'll go under tools and script editor and some name for this doesn't matter so since i'm going to be doing a sidebar let's just grab our user interface and then we'll do a sidebar and that's going to accept an interface which will basically be some sort of html so let's create that html in here and this will be creating html from index file which doesn't exist at the moment so i'll create the file called index and then i'm just gonna go to [Music] my visual studio code copy all of this exactly the same thing i had before go back here and replace this with that save this go back to my code so that should basically create an html and then load it in the sidebar so let's just change this function and load this so i'm going to run all right let's go take a look so as you can see we got our sidebar so at this point if i go and change this to orange we're going to close this and then i'll go ahead and reload that sidebar and as you can see it stayed orange so if i change this to 87 and this banana close the sidebar we'll rerun this function the same way it works so as you can see we're storing this information again in our local storage in a browser and exactly the same way we can just use that to basically store these things in this form and that should do it thanks for watching and i'll see in the next video

Channel: Get __it Done!

Views: 1,860

Keywords: Local, Storage, JavaScript, Web, App, How to

Id: P6rxuyNT7Tw

Length: 16min 40sec (1000 seconds)

Published: Tue May 04 2021