Welcome back, ladies and gentlemen.
Today, what we are going to discuss is a small problem that I run into now, going to the court at
a movie and go here, try to change this.
Now, some reason I disbarred, delete an update card was deleted by mistake from my my program, my
application that I was working on.
And I had to rewrite it here.
So you should have this problem because we have this couple of years ago and I was trying to just delete
something here that wasn't working.
And I said, OK, where's where's the code that I have written for that one in this code?
Actually, the last one was missing.
So I just write it down again.
Luckily, I had the the videos here to help me out.
Now, I've noticed here one mistake that we have done.
We just in the previous one, if it's working for you, you don't have to worry about it.
But that matches requires two one parameters.
And I just passed one.
And that was this class here.
That target in or at least.
No, but for some reason, if it's not working for you, you can get the parent class and that is from
the spin and just see this or any other children.
Right.
And it will work probably.
So also when you click outside here.
So when you try to update it, for example, to three and if you click here, it will not happen.
But sometimes if you click here, it will seek to read the data set because we are trying to get that
data set before.
But you don't have to worry because I think so.
I'm just check it out.
Data that card that was working.
Right.
So let me check the movies, here it is, and sometimes it's not doing its job properly.
Let's go back.
Here it is, dirty and data that was in that movie that.
Let's just dated a movie in here, had data that movie, the number of tickets, and it's going to be
updated, but it takes some time to update it so that the league is working.
Everything is working.
So let's continue on our project.
And that was pretty much he didn't want to just want to say here about my password.
If in previous lecture he didn't see this, that means that I have done some problem.
I have done some mistake.
I just mistakenly delivered this part.
But it's now there in in today's lecture, we're going to work on the local storage.
So I just first going to tell you a little bit of the local storage, because we have done the local
storage.
And if you go back to the console, we have that local storage storage available right here, local
storage.
Now, the local storage here, we'll have the card, the likes and what I'm going to do here, I'm just
going to clear it.
And now I'm going to back to the local storage in the local storage will not have anything.
This is because I've done different testings before, so you don't have to worry.
So your local storage will not have anything inside.
But you do have access to a couple of functions, methods that we used.
We can set them, we can get them, we can clear the local storage and yeah.
So local storage have access to these methods.
And I'm not going to many details because remember, we have done local storage for storing our data
back in the first project that we have done a little to do list.
So a little bit of history.
Local storage property allows us to access the storage object from the window object.
Right.
And we can store data and the BDC across browsers sessions.
Now, local storage is similar to the storage except the storage data.
So the data has expiration.
But in local storage, data has not expiration time.
And if we refresh the browser, we're not going to see any changes.
For example, here, if I do a local storage, let's say local storage that said item and I said item,
for example, I don't know, Rick.
And here I will say thirty three.
That's pretty much what I want and I can enter it now if I go to the local storage, actually local
storage.
So how we can grab the item so we can grab the item by saying get the item and we are grabbing the item
by the ID the first or is the ID and we will see if that is successful.
And because I misspelled my name, here it is.
It will give me that year back thirty three or the second one that I put it.
So this is how you can set items, this is how you can get item.
The thing is that you can remove the item, for example, you can remove everything from the local storage.
But let's first set another item and let's put Andy here and let's hear forty five.
Now we can just remove local storage, remove item and that item, for example, needs to have the what
needs to have the idea.
So I know that Andy is dead, so I'm going to delete the first one.
And now if I'm just going to see local storage get item break like this, it will not work.
But if I see Rick or sorry if I say Andy, Andy will give me forty five.
And the other matter you can use is local storage that clear right in it.
It will clear anything.
So now if you go back to the local storage it will be empty.
So the length will be zero.
OK, so that is how we can use the local storage.
But why we need this.
So we will use this for our cards, right.
We will use it for our cart and for our like models.
So we are going to save some data there.
Right.
We are going to purchase the data.
And after we refresh here, I want to read it back from the local storage and put it back there, because
now, for example, if I go to the movie and if I add the ticket for a movie or even if I like it,
so are there right.
Everything is OK.
But if I refresh it back to zero and this is something that we don't want this something that we just
want something to have it because we want to save some data.
OK, now how are we going to do this back in our go back in your view, not use the model.
So back in your cart now here, are we going to add a couple of methods and we are going to add these
methods and we are going to test it out here with the kinds of locks, are we not we're not going to
be able to test it out today.
I mean, in this lecture.
But we're going to be able to test it out, how it's working here.
OK, so let's do something here.
Interesting.
So first things first.
Now we need to create a function that will be called whenever we have some changes in these here.
So these add item function is actually pushing on a new item into the array.
So that is a change.
So this array will be increased.
Right.
So here I want to call a function that will say persist data locally.
Right.
And I want to call this function from here.
Right.
This function will be actually created sorry, outside here.
And what this function will do, it will actually save the data into the local storage.
So I'm just going to write the function first test data locally.
Right.
And it will not take any parameters because what we're going to do, we're going to simply just see
local storage, that set item in now because we are in a car.
I want the key to be cart simple.
We don't need any other keys just to cart in.
OK, now inside I will use Jason that string if I method and I will explain you what this will do.
So also we need to pass the entire movies item array, the array that was changed here.
So every time we change it, we just call this one in.
Every change is pushed back to the local storage and it's saved by the cart.
OK, so Jason, that string inside this movie items.
So Jason, that string of method converts a JavaScript object or a value to Jason Street and optionally
replacing values if a replacer function is specified.
Right now, what?
Maybe this is not what you want to hurt, but Jesus Reavie is used to create Jesus string out of object
or an array, and it will serialize a JavaScript object into Jaziri.
And we do have this array here and it will make it as a string.
Now, later on we will use a different method that we will convert these days of Stringybark back to
something that we can use.
Right.
We will use that Jason parse to parse the data that we receive from adjacent object and it will serialize
this one, serializing a JavaScript object, introduce a string and parse the other method is called
Jason, like this force.
And we have covered this one.
But I just want to explain again this.
You realize that Jayco String or whatever we have here back into JavaScript object, right?
Because we don't want to work with the strings.
We want to work with object.
Okay.
Now, for that reason, we need to run.
Another function is that will be say, OK, the next function will be restore data so you can call whatever
you want, restore data from local storage.
I'm just going to say a local storage.
And here this will actually restore the data.
Now I'm going to create a custom variable here data.
And this here, I'm going to use the adjacent object that I've told you.
So this is actually going to pass the data back using this one back to a JavaScript object.
So pass.
Right.
And we're going to see a local storage, that gift item.
Now we're grabbing the item by the key, and we always know that the key will be the card.
Nice.
So we are done here.
But now I have the data, as I should have, as a as a as a JavaScript object.
What I will do with that data.
Now, it's interesting because this method will kick in after we refresh this browser and what it will
do, it will have a data here and it will grab it from the local storage.
Remember, the local storage after the refreshing of the browser will still have to manage to have the
data back.
So it will stored here.
And we can just simply push it back to the movies.
Right, because the movies will be empty when we refresh it and we we say, OK, we I have something
in the data and we can check Eve data.
So means that if I have something then these are not movies.
Item will be equal to the data back.
Right.
So I'm going to set these movies items.
These are relate to the data and actually this data we passed the.
Back to JavaScript object, that's first we screen, you find and we pass them back, OK, now to test
our idea, we're not going to be able to do it right here.
But what I'm going to do because we need to work in the controller.
So what I'm going to do here, I'm going to just play around with the console here, if you don't mind.
Now, for example, I'm going to search for a movie here, and we need to do a couple of changes, by
the way.
So if I say here data now at the moment, I will have the like movie and search.
So this like we remember we had it last time and we had it in outside the movie controller.
Where was it?
Here it is.
Data like so what I'm going to do for testing purposes, I'm going to say data that can't equal new
card.
Remember that card and like they have empty constructors so we can do this.
Now, if I say data here and enter, I have like card movie and I don't have search because search is
not created.
You can even create search.
You don't need that one.
OK, so data, that card is pretty much movies, items, array that is pretty much empty.
OK, so next thing, what we need to do is actually we can just see here we can search for a movie.
And let me just this one search for a movie and add this one to the card.
You know, I do have some personal data.
Processed data locally is not defined.
And I know what is the mistake?
I think so.
So we need to go back here and we need to say this, that person's data locally.
So now it should work or.
I hope so.
So I'm going to start actually the movies there.
So I'm going to add it and it will not be able to see any changes.
It's added here nicely.
This is working.
So for now, if I go back to the data, that card, I know that in the card I have this movie right
now, if I refresh it, if I go back to the data, the card, I still have access, but I don't have
these items are movies are actually empty and I do have access because of the.
Where was it?
Because we just managed to do it outside of the functions, right?
So I just feel the data card with a new card.
Cool.
Now, I'm going to have it one more time.
And if I go back, I will have the movies items, array, one item.
Right now, I just want to save this data to the local store.
So I'm going to see here local storage, local storage, that set item.
Right.
So we going set the item here and I'm going to say car.
So what we are doing, we are mimicking this part here.
We are mimicking these purchases data locally.
Right.
So local storage, set item, car.
Now I'm just going to use Jason, that string you buy again, that method in here.
I don't have the access of these movies like I do have here with this keyword, but I do have access
with a data dot card that so I'm going data that card in one more level down and here it is.
It's giving me the option to put it like that.
So make sure that you have to set to do your brackets here.
So that's it.
We set that data.
Now, what we will actually do is we are I'm going to refresh here.
And let's see if I have something in the local storage, but first let's check this one.
So I don't have nothing in the cart here.
Right.
So means that it's empty and here are the local storage that so I can access the card and here it is.
I do have access to this one.
Now, if you use the Mozilla Firefox browser, it will give you some weird it will give you some weird
string here.
So I don't want to do that.
That's why I use the chrome today.
OK, so that is pretty much it.
We feel that data is for now.
If I refresh back and if I go one level, I mean again it will stay here.
So this data is persistent.
Back to the local storage.
Right.
And there you go.
This is how are we going to do it?
Know also what I want is that I can show you the data.
That dot car is empty.
Here it is.
But how we can put it back, this data here so we can put that back, this data here, same as we did
it like this.
I'm just going to copy.
I don't actually need to copy.
I'm just going to say here, data, the card, that movie ready.
So I do have access all of the movies items already.
Right.
And I will say, Jason, that pass in here, I'm going to pass the local storage, not get item in here.
I'm going to say card.
Oops.
And let's be sure that we just can't close it now if I go to that car.
Here it is.
We have the same one that was in the storage.
It was passed back to a JavaScript object and now it's here.
How cool is this, ladies and gentlemen?
So from the next lecture.
So let me just copy these two here and we need to add them.
One more thing to you before I forget.
We are going to do like and we're going to add them here.
But instead of cart here, we will need to be something else.
What?
So here it will be const.
So here should be the likes.
Right.
Because remember we do have these likes here and I'm going to say here, OK, so likes and these that
looks nice in here I would just say looks just like that because data Jason that pass local stories,
get item legs in after this.
We need to just put it back to the likes array.
Nice.
So everything should work now but we need to call it here.
So these dot first, these data locally, we can even call the other one.
Right.
But we're going to leave that for the next picture.
So what we have done this today, I just explained the my mistake that I have here in the controller
and I just told you that you can use this one because that is the target.
That just requires two parameters.
But if it's working with the other one, you don't have to worry about it.
And you if you have that warning from the data set that you got, it couldn't be found.
Don't worry about that either.
Now, that's pretty much it.
It also what we have done, we just discussed why we're going to use the local storage, because when
the browser is refreshed, we still going to have access to the local storage right here it is in here.
We can say local storage, that car.
And it will give us that thing here, because at the moment here, there are a lot of things.
But you can access the car right away.
OK, so that what we have done, we used to method's here.
The first one is Jason Sreedevi that will serialize this adjacent object.
Actually I read that we are passing into string in here.
We need to work again when we want to restore the data back and put it back to the array.
We need to work with real JavaScript object and we're going to use the opposite of Jesus 25, which
will be Jason the Pass.
And here we passing these, um, you get item by the key in keys like in this and cart in this.
OK, next lecture.
We should be able to work here in the index and we need to get rid of a couple of things here.
For example, the movie controller, we don't need this too.
So we going to put it in the in a new controller.
Actually, it's going to be event listener and also this guy here that we were sitting at the beginning.
Right.
OK, I will see you in the next one.