So our app works pretty nicely, but the problem is the moment I will refresh, of course, I'll lose
all my values.
In order to fix that, we'll need to use one of the browser APIs and I want is for the local storage.
Now, as you can see, I already have the key value pair for my list, which of course I'm going to
delete right now just so I can start from scratch.
But the way it works is I would just want to call the local storage, which of course is the name.
And then we have few methods.
And the one that I'm interested is set item.
Now we want to call it every time something changes in my list.
So I'd want to do that using the user.
So we go with my usufruct and then I'll say that every time the list changes, what I would want to
do is call the local storage, then set item, and then it is key value pairs.
So we need to come up with a name.
In my case, that is going to be a list.
And then the second thing is we only can store it as a string.
So we're going to go out Jessan and string Afie and then we pass in the list.
So now every time you do something with the list, we will wipe out the old values because essentially
we will overwrite and will save the latest values of the.
So technically everything should work.
But of course, we'll also have to handle that when initially we set up the list, because at the moment
it is an empty array.
But since first I would want to showcase that, once we add something, we should see the values.
Let's go with first item.
There it is.
Now it is added the second item.
And now we have a list of the items, so as you can see, this works.
The problem is that once I refresh, I still start with a empty road.
OK, so how I can fix that?
Well, I would need to navigate back.
I would need to go to my app.
And I notice here where we setting this up as an empty array.
I will change this around the world.
First, I'm going to come up with a function in seconds and then get local and storage work.
So and one is equal to more function, of course.
And now I just want to start by getting that item from the local storage Michelet list, some kind of
variable name.
What was storage?
And then instead of Sitaram, I'm looking for get item and I'm looking for the list.
Now there's going to be two options, either exists or it doesn't.
So if it does exist, then of course it is going to be truthy, meaning it is going to be evaluated
in the condition to travel.
And then of course, I would want to return it.
If not, then I would want to return empty.
All right.
So at least some kind of basic value.
So I'm going to say, if less so, if the list exists, then I have my condition.
Then I'll say return and please return.
Jesson pass.
Since we're storing this string, we also need to pass it and we go to a local storage and then get
item and then we pass in the name that we set up previously.
So since previously I used the list.
So that was the name for Macchi.
Now I also need to of course get the item whose key is list.
However, that is not the case.
If list doesn't exist, then of course I would want to return an empty array, but I definitely need
to return something.
And then notice here where we're setting up the use that instead of empty array, which is going to
go with get local storage and fork it.
Now you'll notice that by default, of course, it is an empty array.
But if I start adding the items.
First item.
Second item.
Now when my app renders, I still get those values.
So now, of course, if I delete and again if I refresh, it is still stored in the local storage.
That's our grocery.
But hopefully everyone enjoy the project and I hope to see in the next one.