Saving Arrays and Object in Local Storage

hello everybody uh this is a quick uh demonstration to show how you can use local storage to save complicated data to deal with the problem of local storage which is while local storage is great it's useful it's a way to to persistently save data for your web apps in the browser across user sessions and across tabs but the downside is is it only store strings well sometimes it's the downside while the simplicity is nice it gives us one big issue what about complicated data complex data like arrays or objects how can we store that in local storage since it only lets us save strings if we don't do anything and just try to save data in local storage arrays just get converted into comma separated values and an object gets converted into this very useless object object in some brackets as a string which of course when we try to pull that out of local storage to do something with it we've lost pretty much all our useful data at that point so here's the trick we're going to use two functions that are built into javascript json.stringify which is a function that can take an object or an array and convert that or serialize it into something called javascript object notation so basically right here when we call json.stringify and we pass in an object or an array it's going to serialize that into a string using javascript object notation and that way we don't lose our data and we don't end up with the useless object object so here's a quick example here we're making a variable named veggies with three strings in it it's an array we would like to save that in local storage so we're going to call localstorage.setitem and then we're going to give it a key of veggies and then we're going to use json.stringify which is going to convert our array into javascript object notation as a string and of course you can store strings in local storage which is fantastic so now that we've we've created a string in local storage using json object notation when we would like to fetch or read that data from local storage we need to use the reversing function for that which is json.parse json.parse is a function which takes a string in javascript object notation and converts it back into a javascript object or array all right so let's see a real live example here i have let me go ahead and open this up using live server extension and vs code so we have a basic form here has some data about a car in it use the little bootstrap nothing special um now it doesn't work yet right so we just have the html for this form and if we go in to chrome here you know we can type in whatever we want let's say our vehicle make is subaru and our model is a forester and the vehicle color is red we click submit nothing happens yet what we'd like to do is take this data save it in local storage and then anytime we come to the page we want our web app to first check and see if there is any car data in local storage and if there is pull it out and update these inputs so that way they retain their state so let's make this work if we look at our index.html what we see here is we got a little bootstrap some basic html for our form using bootstrap we have fields for make model and color and a submit button now we've linked up this external javascript file at app.js and if we go look at app we just got a teeny bit of starter code here so we're querying the dom to get our car form right so we're getting element by id car dash form and if we look here our form has an id of car dash form and we are listening for the submit event and we don't want the page to reload which is the default browser behavior so we're going to call prevent default so now what we want to do is a couple of things we're going to need to get our values from the form inputs and then we need to check if they're valid we're not going to do any serious validation here we're just going to make sure that the user has entered something and then we're going to save them in local storage using the technique we just discussed once we have that working we want to do the other part which is anytime the page loads up we want to check local storage for the card data and then update the values in the form so we're going to go ahead and begin first with our getting the values from the form inputs let's just console log those so if we pull our index.html let's make it so we can see both at the same time we're going to need to get the make the model and the vehicle color so let's go ahead and do that i want to console log the values of each so i'm going to console.log actually let's make a variable so make var make and then we're going to get our value that way so we have an id on our input of make so i'm going to go ahead and say document.getelementbyid make and we're going to get its value all right now we'll console log that and just make sure that we are indeed getting the make when i click submit so we'll say subaru submit oh did i save i did save well that's odd sure why we're not seeing anything on the console okay let's do a little more debugging here it seems that my submit function might not be running ah submit function is not running ah there's a problem my buttons type jeez gotta make sure that's the submit button now it should work and there we go okay great so now that we've got that resolved let's continue on get rid of all our little checks here all right so now that we know that we can get the make let's proceed to get the model and our color and there we go make subaru model force or color right so we're successfully getting the data and the last thing we want to do is make sure that if any of those were not complete let's just go ahead and bail out of our functions so we're going to say first we're going to trim the white space so we're going to say dot value dot trim like so we're going to add that to these both these lines and that's just going to trim off any trailing or leading white space so spaces new lines etc and now we're going to go down here and add our condition so we're going to say if not make or not model or not color let's just return in the function normally i'd do some more robust validation and we would probably want to display some sort of pop-up to the user or some display some alerts on the page next to each form to indicate that they weren't correctly filled out but really we just want to show off how you can store objects in local storage so we're just going to keep going next up we want to save this data in local storage as an object so i'm going to make a car object here so we're going to save our car info we'll call it and it's going to be an object and i know there's shorter ways of writing this if you are familiar with our es6 syntax but i'm going to stick with javascript that will be compatible with much older browsers without needing any extra help so we're going to say model model and color color like so so we're going to get our car info and then we're going to go ahead and put that in local storage so we're going to say local storage dot set item we'll just call this car info and then here's where the magic goes so let's just see what happens if i don't first use that json stringify function so here we are going to get our car data from the form make sure that it's all been filled out at least a little bit we're going to create our object for storing our car info and then we're going to stash that in local storage with the key of car info so let's run that and see what we get we're going to submit and now if i go to application local storage we're going to see that car info got saved as this rather useless object object which of course i won't be able to use to get our card data when we come back when we return to the page so what i need to do is take car info here and first i need to pass it to json stringify or json yeah stringify there we go and pass in our car info object and now if we try this again take our form here and we fill it out and submit and now if we go look at our local storage we can see that it's actually stored our object in j what's called javascript object notation or json and i will be able to then when i come back get the color make a model back so that's going to be our next step we're going to go up to the top of the page and since i need to update our elements again it might be a good idea to actually make these global variables for now so that's what i'm going to do i'm going to make global variables for each of these elements in the page because i'm going to need to use them both down here when i'm getting the data but i'm also going to need to use it when i'm pulling the data from local storage and then updating those inputs so let's go ahead and do that now that's going to be our make input element our model input element and our color input element great all right so now i need to check local storage for car data so we're going to say var car info equals local storage dot get item car info now remember this is still a string so if i tried to console.log car info dot make for instance it's not going to work yet because i i'm going to get this object but it's still a string it's still in json object notation so if i reload my page right now and we go look in the console we're going to see that that logged undefined because if we do type of on car info we're going to see that it's still a string so whenever we store data using json stringify when it gets read we want to convert that back so instead i'm going to say i'm going to take my function here that gets the string put some parentheses around it so that way i can call json.par like so and now let's see if i can console.log to make and there we go it says subaru fantastic okay so now that we figure out how to get our car info now we can go to our make input so i want to say make input dot value equals car info dot make and then we're going to change this one to model and we'll change this one to color like so so let's see if that works hey there we go see if i reload the page i have my data in local storage in there which is awesome let's do one more thing what about the first time a user comes to a page right they won't have had anything in local storage so i'm going to clear local storage out and refresh the page one more time to see what happens so oh so the problem is we have a nothing in local storage but i went ahead and wrote code that assumes that there will be something in local storage and that fails right because if a user is coming for our first time there's no way for something to be in local storage unless i make my code at it so what i'm going to do here is after calling parse if we console.log let's go ahead and comment these three lines out for a moment if we console.log car info we're going to see that car info is no when there's nothing in local storage so what i want to do is say if not car info then let's go ahead and make actually rather than if not car info let's say if car info so if car info is a truthy javascript value so something other than undefined null false zero or empty string if it's not one of those values then this evaluates to true so i only want to set those values if i have car info so i'm going to put them behind this conditional and now if we try this again we can see that there's no error and let's just make sure everything works i clicked submit now if i reload the page we can see that our data is persisting because if we go to our developer tools here to application and look under local storage we're going to see that car info is successfully saved in local storage so that's how you can use local storage to persist data that is complicated that is complex such as objects and arrays and any other data structure that's more complex than a simple string you can use json.stringify and json.parse

Channel: John Desrosiers

Views: 5,848

Keywords:

Id: 2IHiO90LUEI

Length: 17min 8sec (1028 seconds)

Published: Mon Sep 14 2020