Welcome back, ladies and gentlemen.
Today, we're going to do we're going to try to save the local storage and grab that data and display
back to our UI here, we will say, OK, we're going to have some data, and that's pretty much it.
So what we need to do, we need to open up the index, our main controller.
Right.
And let's open the where we have all the event handlers here, event listeners.
Now, I'm going to see five here and browser refresh like that, OK?
And I'm going to add it on top here.
So we need to add on the window, adding a listener and it will be a low load and it will not take any
parameters, this function here.
So it will be an error function.
Make sure that you close this one at the end.
Now, first things first.
I want to add the window that data equal to that data.
And we have the same code, same line here on top.
Here it is.
So actually, I'm going to delete it from here, but you can comment it out because in future, if you
just rewind here, you will see, OK, I have it here now.
I just moved it down here.
Or you can add some comment.
Now, a couple of other things that I want to add is actually to move this to two of this here.
So first, let's first I'm going to move the like, right.
We're going to work on the like.
And I don't want to cause any more problems.
So that will be our second line.
So everything that we have just outside implemented somewhere outside, not in a function, not an event
listener.
So we can put it here.
Right, because outside is not the place now.
So data that like it will be equal to new like in now what we want to do is want to see data that like
restore restored data, local storage.
Right.
So with this in our like control model, we actually have RESTOR data, local storage, and it will
write down the likes that we have from the local storage.
It will put them back in the likes area.
So that's what we are doing here.
Now, if we have anything, actually, because we are checking if we don't have nothing will happen.
So that is pretty much it.
Now we need to display the links from the local store.
How are we going to do this?
Display the the likes from power storage.
Oh, how are we going to do this?
So I'm going to create a one constant here or a variable you can see likes just like before.
And that will be equal to the data that like that show not list likes.
And this method, by the way, show likes was returning the entire array here, because remember, after
calling this method, if we have something in local storage, it will be saved back into this array.
And that's why we can just see what's happening here now.
Cost likes, equal data lags.
And we are just calling the show like method on it now.
It will be stored this the entire array that we return and it will be stored here so we can do a foreach.
So like that for each.
So pretty much the same as a controller that we did.
So I have the access to the current element and here I am going to see, just like you, the display
like model, not model that I have before and the element.
So that is pretty much what we need to do.
So let's have it and let's go back here, refresh, make sure that nothing is wrong or inspect the console.
And we don't have any problems.
Let's load a movie here.
Oh, actually, let's test to see if anything, we have it first because we were playing around last
time.
So the local store is not clear.
Right.
Make sure that local storage is done.
Now, if you go back to local storage, it will be zero.
OK, and also go back to the data and see what we have.
OK, again, we do have the like, although we refresh it right.
Because that like is coming from the line here because this is on we had we added the event listener
on window object and it's load and here we can just see browser.
Refresh that and just give it the breathing space, also breathing space from here.
Good.
Now let's test it out.
So what we need to do is actually to search for a movie.
Just going to close this one.
And I'm going to add a movie here and it's there right now.
If I refresh, it's still not the movie is actually liked.
Right.
So we know that something is in the local storage and plus we do have here, but it's not there.
Right.
So we something something is missing here now.
So we need to call a method called display like no here.
And that will be like no.
And we will say, like you that display like no in here we need to pass what data that like that number
of links.
And I should be able to get that number.
And by the way, this was a function.
Remember, we do have it in like a number of flags.
And I'm calling on the like view display like, no, nice.
So let's say save it here.
And I haven't done that.
Just save it.
Refraction.
Here it is.
So if I refresh now, if I even go back here, it will stay there.
Right.
So if I go back here, I can unlock it.
And now I know we have another problem.
OK, so that problem I will just show you.
So it is working, right?
See, the number is changing.
It's adding up if we refresh it, staying there, if we just remove this one, it will stay there.
But the thing is that when we click here to unlike we have the method in our lives here to see the light
movie.
So what we need here is actually to call this that versus the locally.
Why?
Because when we are deleting movie, I just want this to go back here and to grab that, because here
we are removing from the likes from the likes area.
We just remove that one from the with that particularity we remove the like movie.
And now I just want to go back to the data and save it.
Then you the newly created or deleted item from that.
I'm so sorry.
So I just want to save the array that has one element less than previous because we deleted that one.
So save it now.
So now it's going to work.
So if I click it here, it's zero.
So if I refresh or if I delete the entire thing and I go back, I should be able to see zero right before
back.
The the local storage did had that one in the storage that still had that number.
OK, now that is for you likes.
So we go back here and we need to say we need to display
the card from local groups,
local storage.
Now here I'm going to put data that like a solid data about a card, but I need to grab it from top.
It was in the movie controller, so I don't need it here anymore.
Right.
This was just for testing and now it's the time that we need to fix it.
And you can put it up here.
But I really.
Well, yeah, the better it's to be up here, everything that we need to declare and the it should go
first.
Now this little card from the local storage.
So what we need here first we need to create that card.
So the car I want to restore the same data sorry.
Later that car.
And I want to restore the data from the local storage.
Cool.
So I will grab it and I will save it back to the car.
Now the next thing is to see, to create a variable called movies that will hold the entire movies array.
And how is that data, that car, that show list.
Now, if this show list is a confusing for you guys, make sure that you can change it in the indie
movies.
Right.
Sorry, Indy car, actually not in the movies.
Show list, it can be a show movie list, right?
So that was probably a better name now, but if you change it, we have somewhere else here.
Make sure you change it everywhere.
So in this constant I return the entire movies are movies, items, array.
So I have this access and I can use that to loop through it.
So movies that for each I'm going to pass the current element in here.
Same old card view.
Oops.
Big display movie item in here, I'm going to pass the element that's pretty much it now.
Also, I just want to see if the concert card number and this number, we will use it to display it
here.
Right.
So card number, it will be data, that card, that show show list.
And this actually going to return the entire area in here.
I'm just going to say card for you that display card number and I'm going to pass this card number card
number that length.
And that should be the one so card no here I'm going to say car.
OK, now let's search for a movie and this movie here, I'm going to do a browser refresh and the movie
is not there.
By the way, what's happening?
Let's see.
We had some error.
Is property parent element of no.
So the movie item in a car view J.S. 13.
Why is this happening?
And let's look back into our current view.
So what is happening here is saying that is a model, the movie idea, but why are you calling this
one?
OK, yes, he here, just instead of displaying movie item, I'm just deleting movie items, so display
movie item, that's that was something that OK, that was the error over there.
OK, so I'm going to refresh now and here we go.
Actually, the one that we saved is still there.
Now, if I go back here, I can be able to delete it and let's let's refresh movie.
So I'm going to like one.
And actually we don't delete that one.
Right.
That's another mistake that we need to fix it.
Same as in like we just when we are deleting like a movie, we need to do the same thing.
When we are deleting a movie from the card, we need to call this function cool.
Now, what I'm going to do here, I'm just going to clear this console up.
So what we're going to do is the local storage clear.
We're going to call this method clear.
And I want to be clear.
Nice.
Here it is.
Doesn't matter how many times I refresh now, it's not going to have anything.
So, OK, so we go back to the movie.
We're going to add a movie, right.
We're going to refresh the movie will stay there.
We're going to delete it.
We're going to refresh.
And yeah, something went wrong because we don't have any movie there.
Right.
So that is pretty much it.
Let's sorry.
Let's search for movies and like this one you can like the other one, get like that one.
OK, and also we can add this two core and add these two car.
Nice.
So I have two car movies too.
In the car.
In three in the like.
Right.
So now if I go back here I will not have any problem.
Why.
Because they will stay in this storage.
I'm going to delete both of them and I'm going to go here and going to like oh I'm going to like all
of them actually.
I'm going to leave one.
OK, so if I refresh now, I will have only one stayed there.
Right.
Nothing else.
So if I go there, here can actually the our logic is working.
So we were able to see, we were able to save the data, to store the data, to persist that data onto
a local storage and also at the end just to grab it here and to display it back.
So this is pretty much powerful because no matter what happens, it will work.
Right.
So let me just show you one more thing.
I think when we are just saying move here, just add this one.
So I have one light and one one like in one in the car.
So I'm just going to copy this localhost.
I'm going to close it here.
Right.
And I'm going to say Google again and I'm going to base that back.
This one here.
Now, this is happening with the local storage.
A local storage still holds that information.
The same one here, the scary movie and the same one here.
Right.
Nice.
So that means it's perfectly working as it should.
And we can still go like it or I like we can refresh.
Nothing will happen.
OK, that is pretty much it.
And I'm super happy that we have done this.
So the entire project is now considered as complete.
So what else we can do here?
We can just remove some of the comments here.
Actually, I don't have too many comments, but when I type movie, we just bring out the array.
Right?
So what we can do is actually go back and strife.
We have console log here it is the query, some searching, but we have Consolo.
This one here knows what else we do have here.
The description actually we haven't as the description.
And that's a good opportunity now to do this in lovely day like here.
Again, we do have consultatively like, yeah, I think we are all OK, save this one.
Now I'm going to search a movie here.
I'm going to go back to this movie.
I'm going to like I'm going to increase it.
I'm going to buy tickets.
See, everything is working nice.
Let's see this one increase it reviews cast and crew, media.
The stars are there.
One, two, three, four, five, six, seven and a half.
Why?
Because it's always working like that.
Here is a six point two.
One, two, three, four, five, six and a half stars.
Pretty much everything that we were looking for.
Right.
Even this working in.
It's pretty much it for this awesome project.
Now let me just check the specter again.
Do we have some myths here?
No.
So that is pretty much for this project.
And I will add more lectures probably in future.
Those lectures will be additional lectures.
So if you don't understand a couple of things here or not not here in general, when I say in the entire
course, so I will add extra additional exercise for you guys, some of them, you will find it easy
because if you know how to do this, you don't probably not going to need them, but it's not going
to it's not going to affect your time too much if you just check them out.
So everything that I will put extra after this, I will state it as additional exercises and also make
sure that you check the following lectures that I have after this project.
So thank you very much.
And I will see you in the next one.