Our car functionality is working.
We can add items we can remove.
We can increase the amount.
Decrease the amount.
The problem is that each and every time reorganize refresh the page we're gonna start from the scratch
because within the car context we are starting from the empty array.
That's the reason for that.
And how would we be able to fix it.
Well we could use the local storage where each and every time we're going to update something about
the card.
We could also use the local storage and we could set some kind of key value pair.
Now I'm gonna name my killer value pair cart but as always you can name it how are you want and the
way it's gonna work is I'm going to say local storage not local card local storage land.
The methods we're looking for is set item and then we're gonna write a new value by the name of card
so key value pair the key name is going to be cut.
Now we do need to make sure that we use adjacent string fire because we're going to store it as a string
and we're just passing right now our cards values.
So in each and every time we're going to update something about the card we're also gonna set it in
our local storage.
Please understand that I purposely just overwriting this.
So whatever value I'm going to have initially the moment I'm gonna update something about my card I'm
just going to overwrite that.
Now I'm going to save it and we're going to check it out in a console.
What we're going to have.
So currently if I'm going to store to inspect and then if we'll look to application then we have local
storage.
And of course we're looking for local stores 3000.
We have a card that is set equal to an empty array and we also would want to set it up that each and
every time of course once we load the application we get the info of whatever the correct value was.
So if I'm gonna head over to the product and let's say if I were to say I had the card.
Notice how we're adding right now items to our local storage.
Now we have one item then let's say if we're gonna add one more then we're gonna have two items in a
cart and all that works really well.
But again the moment we're going to refresh.
Well there's no way for us currently to get that info of whatever values we have in the card so we're
gonna have to head lower back to our application and instead of starting from scratch I'm going to set
up here a function.
And again my naming is gonna be different probably from yours but I'm gonna call my function get card
from local storage.
So let's set up our function.
So we have function get card from local storage storage that way I know for sure what this function
is doing.
And then this function is going to return one of two things either it is going to return an empty array
if the item the key value pair of cards does not exist within the local storage.
If it does exist then we're just going to get whatever values we have currently within a local storage.
So then let's head over back to our function.
Then like I said we're going to return.
And first we're going to check whether the item by the name of card exists.
And for that we have a method of get item and we're checking for the card.
Since we're setting up the ternary operator we're going to have my question mark.
And again we have one of two options if the item with a key value pair of card does not exist in my
local storage then I'm just gonna return an empty array.
So I'm going to have a call and then return the empty array if that item is there.
Well then of course I'm going to look for Jason then we need to use pass.
Remember we string a fight when we were storing it.
So let's write pass and then we're gonna pass the local storage get item and then we're using the same
method.
And we're looking for the same key.
So we're looking for our card key.
And once I set up my function I just need to make sure to replace the empty card value that I have here
the empty array for my function somewhere safe get a card from local storage and I'm going to invoke
my function.
Now in this case each and every time we're going to update our key in a local storage when we're going
to refresh we're gonna get the latest values.
So let's head over back to our application and refresh.
Let's head over to products a product.
This guy's added to the card.
The moment we refresh the page we still get that info.
The reason for that is now once we load up our component we're checking.
Is there a key by the name of card.
If it is.
Then get me those values.
And I'm not going to go through and have more items but hopefully you can see that our functionality
is working.