Beautiful work, we have our basic set up in the garbage, and now, of course, we would need to handle
if we have some items in the cart.
Now, this case is going to be that every time we set up something in our component, we'll have to
manually add that item to the cart because we're not persisting that there.
So before we start working on the return on the logistics, I actually would want to set up the functionality
where every time there's a change with our cart, I would want to invoke the user and I would want to
save our current cart in the local storage.
So if take a look.
I already have, of course, since I'm using the final application, but I'm just going to clear it.
And if, of course, you don't have anything beautiful, that is what you should see.
So you have local storage and we'll just persist that data between all of the renters.
And that way, once we add a few items to the cart, then we can just nicely work on return.
And we don't have to go back every time to add a new item.
Just see some small changes.
And again, that's something we have already done before.
So we have the cart context and I have my placeholder functions and right in the bottom.
Or you can do it, I don't know, wherever you want.
Basically, I'm going to go with my use of fact and I'm going to invoke it every time there is a change
in my car.
So I'm going to go with state and cart and I simply would want to grab my cart value and set up the
item in the local storage.
And yes, of course, every time something changes, I'm just grabbing that latest value and then I'm
overriding the value in the local storage.
So we go with local storage and set item online.
We needed to pass them through things.
What is the key?
In my case, I'm going to go with CART and then the second thing is the value.
Now remember that we can only store String's over there and that's why I will go with Georgetown and
then string it and I'll set up my state car and everything is going to work beautifully.
But remember that there's going to be a case where a user just navigate away from the page altogether.
So when he or she comes back, when we initialize the cart, I also want to check my local storage first.
So let me that of course, this is going to work the moment we have empty cart, nothing is there.
But if we go to the products and for example, if I go to this high bench again and if I go with this
one, check it out.
Now, of course, I have the key and I have the value and we're almost ready to start working on our
car content.
But every time we'll make a change, we'll still start from scratch because our cart is just an empty
array by default.
That's why I will scroll up here and create a function that checks whether we have the item in a local
storage by the name of card.
If we do, then I would want to set up my cart equal to that.
If not, it's still going to be an empty array.
So we're going to go here with CONSED and I'll get a local.
Storage, that's my function, and we're going to go let cart.
Is equal to the local storage and as a of remember that this is just a browser API.
That's why we have such a free access to it.
So I'm setting up my card equal to a local storage get item and then cart, and I'm just checking for
the value.
If there's something there, then I would want to return whatever I have in local storage and set it
equal to the card.
If not, it's just going to be empty.
All right.
And by the way, yes, you can write it as a one liner.
There's just some cases where I like to go a bit more explicit because I think that it is easier for
everyone to understand.
So here, I'll say if card so if there's something there, because if there's nothing there, then I'm
just going to get undefined and then will right away go to a place where I'm returning a empty array
or if the item exists, the card item then I'm just going to go return again.
Now I would want to pass it since we started as a string, but now I would want to pass it back and
then we'll pass in the local storage get item and then we set up the card and where we initialize the
state now I'm going to say get local storage and I'm just going to invoke it.
So that way, once we actually add the item, even when we refresh the page, we should see the card
content because we're persisting our data between the vendors.
And if you don't believe me, you can go and add another item here and we'll just say here five, for
example, and we are adding it to the card.
And now I can see that I have two items in the card.
And again, we're just doing that because I don't want to repeat the same steps every time we make a
small change in our return.