React Context & Hooks Tutorial #21 - Adding Local Storage

Key Takeaways

okay then gang so there's one last piece to the puzzle here that I want to add in and that is local storage because right now if I was to add some kind of book title and an author if I then refresh I lose that data and we don't see there anymore now I will like that data to persist and to do that we're going to use local storage which is a way for us to store data locally in the users browser so if you head on over to the applications app you might have to click this arrow to see it and then go to local storage you can see we have a local storage for this web address right here and all local storage is is key and value pairs so we can set a key and then a value much like a JavaScript object but this value has to be some kind of string so I'll give you a quick demo what I'm gonna do is first of all just say a local storage and press Enter this is how we access the local storage API in a browser so if I press ENTER then I can see currently it has a length of 0 there's nothing in it whatsoever but also if we open it and go to proto we can see all these different methods so one of them is set item and that's how we add an item to local storage and another is get item and that's how we get an item from local storage so these are the two methods we need one to basically save an item there and want to retrieve it so for example if I say local storage dots set item and then I'm just going to create an item called name and then the second parameter is going to be the value I'm just gonna say Shawn and press Enter and that is going to create a key of name and a value of Shawn so if we go to local storage now we can see we have a key of name and a value of Shawn and now if I wanted to get that item I'd say in local storage get item and then the key which is name and that's going to bring me back Shawn hopefully there we go now what if we wanted to save some kind of object because our books are objects right we can't save objects directly to local storage the value has to be some kind of string but what we could do is just Jake stringify our object and that's going to turn it into a Jason string version of the object save that and then after we retrieve it later using gets item then we can pass that back into a JavaScript object so for example say we have a book so const book is equal to some kind of object I will just say title is equal to blah and then the author is equal to blah sounds like a very interesting book okay so that is our book so if we take book now we see the subject now what if we wanted to save this to local storage well let me just clear first of all we still have access to oops that didn't work let me just click this we still have access to book even though I've cleared just wanted to give myself some more room now if I want to save this to local storage first of all I'm going to have to jason stringify so I could say local storage dots set item and then I'm going to set an item called my book and then I'm going to jason dot stringify the book so it's going to take this object and turn it into a JSON string and then we're going to save that to local storage so if I press ENTER and then go to application and local storage we can see my book and we get this this is a string right here it's adjacent string so now if I go to get the item let me say local storage get item and we want my book and in fact I'm going to store this in a constant so I'll say result is equal to this press ENTER and then look at the results now we can see that this is a JSON string of an object so what we need to do is pass that back into a JavaScript object in order to use it properly inside our application so all we need to do is say jason dots pass and pass the result in and then that gets us back the object so that's how we can kind of overcome that hurdle of not being able to store objects directly which stringify and then we pass the results so now we know the basics of local storage let's apply this to our application so the first thing I'll do is just clear this and then I want to go to application and I want to clear out these different items so we've got a blank local storage so that's absolutely fine and now we can go ahead and implement it inside this book context ok so the first thing we want to do is save the data when a user type something into these fields and presses that book I want to take that book and I want to save it to local storage when that happens now at what point can we do this inside our context well if you remember we have this hook called use effect and that hook is going to run every time the data updates so currently if we add a new book in the form then this book's data is going to update right so this use effect hook would run so at that point we could take that data that we currently have for books and we could store it in a books property inside a local storage that seems like a good idea to me so let's now say use effect and inside we need a callback function which is going to run whenever the data changes right here and as a second parameter we'll do an array and say books inside it so that means that whenever the books data changes then run this hook so then inside we want to say local storage and we want to set an item the item name or the key is going to be called books so it's just going to mirror it up to these books right here and we need to Jason string if I the array so we'll pass in the books right there which is the data we have so we string key find that turning it into a JSON string and we're setting that item every time we add something to the list so now if I save this and come over here you can see we have this box array right here and that's wrong because remember first of all this runs on first render so because box is empty at the minute and that's what we've saved you localstorage just an empty array but the minute we add some kind of book title are saved the way of Kings by Brandon Sanderson you've probably gets to one of my favorite authors is by the end of this series now you can see that we have this thing right here so now we have an array with one book inside it now if we add another one I'll say the name of the wind and that is by Patrick Rothfuss if I press ENTER then it's going to update over here so now the books property has a value which has two elements inside of it and that's because when we updated the books array and this changed we're resetting this box item we're overwriting it with the new data okay so every time we add a new book it's updating what we're storing inside local storage so that's nice but still when we refresh we still don't see anything here and this has got back to normal so that's not a good idea it goes back to normal because on first render we are basically just setting this to be an empty array because that's what it begins us so what we need to do is let this begin as something else and there's something else we want to let it begin as is what's already in local storage at that point when we first refresh the application so we can actually pass a third argument to use reducer and that is a function and that function should return a value which it will take as the default value so it will ignore this one and take whatever we returned inside the function instead so let's do that function and error function and inside this what I'll do is I'll try to get the books item from local storage so I'll say Const local data is equal to local storage get item and we want the books now we want to only return this item if there's something in here so what we'll say is local data question mark but ternary operator if that's true then we want a Jason dots Pass whatever is in local data so we're getting that data and passing it into a JavaScript object and then we actually want to return this value right here so if this is true and we have something we're going to get that data and pass it and return it and since we're returning it it's going to take that value as the default initial value of books and then otherwise we want to just pass an empty array so if this is false we don't have data then we're just going to use an empty array instead so now if I save this this should work to begin with we don't have anything because there's nothing in there but if I now say blah or whatever and then add this book and then if i refresh now now we get that book because we're setting it as the initial value or right here so let me just add another one the way of Kings by Brandon Sanderson and at that book and if we refresh we can still see that here delete one then refresh and this now is being kept in sync with what we have in local storage so then gang that is it we've completed this application and also completed the whole series so I really hope this has been of some use to you if you do enjoy the videos my friends please do not forget to share subscribe and like that really means a lot and I'm gonna see you in the very next tutorial series you