Narrator: So now that the recipe liking functionality
is 100% working, let's take it to the next level
by persisting the likes data
so that liked recipes are kept
even after we reload the page.
And we're gonna do that using the localStorage API.
So that's something completely new
and really exciting, I think,
and so let's get started with it.
So basically the web storage API allows us
to very simply save key value pairs right in the browser.
And this data will actually stay intact
even after the page reloads.
Okay, so it really stores this data
right here in the browser.
And before actually implementing it into the app
I want to first start testing it here in the console, okay,
just to show you how simple it actually is
to use localStorage.
So all we have to do is to say localStorage,
which is basically a function that lives
on the window object, on the global object,
and so it's available to us everywhere.
So all we have to do is say localStorage.setItem,
and I should have used the tab, of course,
and not the return.
So setItem, and then as I mentioned,
what we're gonna save here is a key value pair,
so similar to what we do in objects.
So we can specify a key, let's say ID for example,
and this is always a string, and then a value.
And also the value always has to be a string, okay?
So we cannot really save JavaScript objects or arrays
or something like that in here.
Well, we actually can, and we're gonna see how in a second,
but they still have to be always strings.
So let's put some string here.
It doesn't really matter.
And so now we set this item into our local storage.
Okay, and that's actually it.
Now if we want to retrieve it,
we can simply use localStorage.getItem,
and then we just have to pass in the key
and it gets back our data.
Okay, so that's really simple,
and that's actually all we have to do
in order to use local storage.
Let's add something more,
localStorage.setItem,
let's say, like, recipe,
and something like tomato pasta.
What we can also do is to simply say localStorage,
and then it will show us what we have in our storage.
So we right now have the ID that we defined and our recipe.
Then coming from webpack we also have this weird thing here.
Okay, so webpack also uses actually the local storage
to save some data into there.
And then we always have access to the length property.
Okay, so we can always say localStorage.length,
and in this case it will then return three.
Now what is so special about local storage, as I mentioned,
is that the data persists throughout page loads.
So let's actually reload the page.
And so let's open local storage again,
and our data is still there.
So we have the ID and the recipes still here.
Now we can set items, we can get them back,
and we can also remove them, and very simple as well.
So remove item, pass in the key, and that's it.
Let's take a look at the local storage again,
and you'll see that now it's gone, okay?
So as you see, the localStorage API is very simple.
We just have setItem, getItem, and removeItem,
and also the length property, okay?
So that's really all you need to know
in order to use localStorage.
All right, so let's now go ahead
and implement it in our app.
Okay, and we start by opening up our model.
Okay, so this is it, because this is where
we actually want to implement the local storage.
Now how are we going to do this?
Well, I think the easiest way to do it
is to each time that we change our likes right here
is to then persist that data,
so to basically store that data into the local storage.
And so that's when whenever we add a like
and when we delete a like.
So when we change the like array,
then at that exact moment
we should save it into the local storage.
Okay, so let's just add a comment here quickly.
Persist the data in local storage.
And then the same thing here in the deleteLike method.
Okay, and so this is the same thing here.
We will do this in both methods.
And so let's add a new method that we can then call
from both addLike and deleteLike.
Okay, so let's call this one here persistData.
Here with the common case notation, and okay.
So it's very simple.
We just say setItem, and we're gonna call it likes,
and then what we want to save here
is the entire this.likes array, basically.
Now remember that in here we can only save strings.
So we have to convert that array into a string.
So we can say JSON.stringify, and then this.likes.
And this will basically transform it into a string here,
which then later when we read the storage,
we can convert it back to an array.
Okay, and that's actually it.
So that's all we have to do to persist our data,
and now, of course, call it from these two methods.
So persistData.
So I forgot the this.
So it's a method on this exact object,
and so we have to say, of course, this.persistData.
Okay, and let's actually test it our now.
So we reload the page,
and then let's now like this recipe.
And now localStorage,
and, ooh, here we actually already have our likes.
So it's already stored in the local storage.
And you see that it actually did
convert the array into a string,
and all of the objects that are inside it,
well, right now it's just only one,
but it still also converted all that
just into strings, okay?
And if you now go ahead and add more,
let's take a look.
So I have the sweet potato,
and let's do it just with this first one.
So we liked it,
and now into the local storage here.
Yeah, we see that we now have both of them
in here in this string, okay?
So it's important to know that it's all
in the same likes key, okay?
So we only have one key, which is for the likes,
and then all the likes will be stored
in that singular one, all right?
Now next up we actually need a method
to read the data back from the local storage
when we load a page, right?
So imagine the scenario that we're reloading a page,
and we again want to have access
to all our liked recipes
so that we can then put them here into this list, right?
Because if we reload it now,
then the data will, of course, stay in the local storage,
but will be gone here from our list, okay?
And so we have to add them back
into the list here, of course.
So first off we need a method to retrieve
these likes from the local storage, okay?
And so let's add that to the likes model.
Okay, so readStorage.
And so let's first save it into a variable.
And so all we have to say is localStorage.getItem, remember,
and then the name of the key, which is likes.
Now remember that this here will be a string, okay?
And so we have to convert it back into a JavaScript array
like we said before.
So we have JSON.stringify to turn it into a string.
And then we have the opposite
which also lives in a JSON object, so JSON.parse.
Okay, and so this will convert everything
back to the structures,
the data structures that it was before.
Now if there's nothing in the local storage
or this likes here,
so if you did never store any like,
then this here will return null, okay?
So this localStorage.getItem,
when it doesn't have the key that we're looking for,
it will return null.
And so we have to now test for this.
So if there is a storage,
so basically if it's not null,
well, then we simply want to say that this.likes
should be the likes that we just read out of the storage.
Okay, so in this line here,
we are basically restoring all our likes from the storage.
Let's write that down here,
because I think it's important to remember.
So restore
from the local storage, okay?
So this one here is important to store
the result of what we read from the local storage
back into this.likes, all right?
So let's now go back to our browser and test it out.
Okay, and you see that we have access
to, of course, the local storage first of all
where we have our likes,
and we also have access to the state
through the window object, okay?
Remember that we attached it to the window object
for our testing purposes.
And so right now we have this likes object in here,
but it is still empty.
And so let's now call the readStorage method
that we just coded.
So state.likes.readStorage.
Okay, and now let's check it out again.
So now we should have the data in the likes.
And indeed, here they are.
So they are back to being objects,
and so everything is working perfect.
So remember, we reloaded the page, and of course,
the likes were gone from the likes object,
but they were still in the local storage.
And we then call the readStorage method
that we coded up before in order to restore these likes
back into the likes object
that we have here in our global state.
Okay, and so now you can see
that they are now here back in the object.
All right, and so now all we have to do
is to do exactly this here automatically
in the controller, of course.
Okay, so this here is done.
Let's go back to the controller
and add a new event handler for when the page loads.
Okay, so what we just did in the console
is what we want to do each time that the page loads.
So restore liked recipes on page load.
So window.eventListener when the page loads.
And so each time the page loads,
we want to start by creating the new likes object.
So basically what we did up here,
we now need to do it inside of that event handler.
And so this was just for testing, remember,
and so now we're getting rid of it.
So we start by creating the new likes object,
which will of course be empty after a page reload.
Okay, but now we can then fill it
just like we did in the console a minute ago.
And so we just say readStorage.
And with that, our likes are back, okay?
So let's add some comments here again.
Then we also want to toggle the button.
Okay, so just like we did up here also,
so that in case if there are some likes,
then the button is actually displayed.
And then finally, of course,
we want to render all liked recipes
up there in the menu, right?
So render the existing likes.
So state.likes, and dot-likes again, right,
because that's the way that we called the likes array.
And so now we call for each.
And so for each like, what we want to do
is to say just like we did before,
so likesView and then pass in the like.
And that's it.
So this is the code for restoring our likes
from the local storage, okay?
Well, actually this is not the right code,
so this is, of course, it's likesView.renderLike, okay?
So now it's right.
So maybe you have spotted that already, while I did not.
So anyway, this should now be working.
Let's test it out.
And you see, our list is up here,
and both the recipes we had liked before are now there.
So the Best Pizza Dough Ever, let's now unlike it.
It's gone here.
Let's reload the page,
and you'll see it's still gone.
So that's just perfect.
Let's try it with a couple others.
Let's try the Deep Dish Fruit.
Let's like this one.
And the Cauliflower, this one looks great as well,
so let's like it.
And of course, they're all there.
If we go back to it, the like will still be displayed.
And now when I reload the page, they're all still there.
And the recipe is still liked here
with the, as you can see, the button,
and it's also liked here, okay?
So that's it.
It's working now.
That's the end of our project.
We have implemented all the functionalities
that I wanted to show you.
And I believe and hope for sure
that you learned a lot along the way.
So the next lecture we will just have
some final considerations
and then really wrap up this project.
So see you there in a second.