Hey, everyone, in this video, we're going to do this quick practical example using local storage,
so here's what we're going to do.
We have this input field for the name.
So let's say I typed my name here when I click submit.
What we are going to do is sending this information to the local storage.
So once we have the name stored in the local storage, every time we load this page instead of showing
this form again, what we are going to do is so we have this section called Name Field.
We are going to hide it.
So we are going to use this play.
Norn and instead of showing this, we are going to show this area that's right after it, which is called
Welcome Area.
So this time we already have the name.
So we are going to show this.
Which has this greeting, so hi, Yvonne, how are you and then we also have this button right here.
So no matter if I turn off my computer, restart it every time I go back to this website.
Instead of seeing that input field, I will always see this personalized greeting, which is really,
really cool unless I decide to click it.
So let's say there's other people that use this computer and then I go here, I'm not Yvonne.
I'm going to click here.
And when the user clicks here, you need to clear the local storage and show the form again.
So this is what we are going to do.
This should be pretty simple to do.
So let's get started with let me just refresh the page again.
So let me get the IDs of the input field and the submit button so we can get started.
So the input field is name user.
And the submit button is.
Submit name.
All right, before we go ahead, let's go to the local storage just to make sure there's nothing there.
So application.
So here it is, local storage.
There's nothing here, if you see something here, just clear it all so you can start fresh.
So going to Visual Studio called, the first thing we are going to do is creating a click event for
that submit button.
So let's use Jay Quarrie for this.
So the idea of that person is submit name when there's a click.
Not Clark, but Clark event, we are going to pass this function that we know it's a callback function
for this method and now when this happens, we're going to create a variable.
So variable name, we are going to get what's inside that field.
So name user.
So now let's just do a quick test to see if this is not empty, so if.
We know we can do this with the exclamation mark, so if there's no name means, which means that if
this is empty.
Then we are going to send an alert.
Saying, please type your name.
If this is not empty.
This means that we can continue, so what we are going to do is sending that information to the local
starch, so local storage.
Not set item, I'm going to set a new item code name, and I'm going to send a person's name.
All right, let's save this.
Actually, one thing I forgot here, the name is not just selecting that input field, but we need to
call the Volle method.
So this is going to be the name, the value inside that field.
Now we can save it and refresh the page.
All right, so first let's try to click submit without typing in anything, so it's not accepting because
it's empty, which is good.
Now, let's try to add a name.
Let's say, John, I'm going to click submit.
And as you can see, the name has been sent to the local storage, which is good.
Now, the next thing we need to do here is every time we load the page, we need to check if there's
something on local storage with the name.
Let's do this now.
We can do this afterwards.
That's not a problem, so every time we load the page, here's what we are going to do.
We're going to start an if statement.
So if.
We have local storage dot name, so this means that that key exists and.
We know for sure that if it exists, there's something there because we are not letting it send anything
through that field if nothing is typed.
So there's already a good level of protection on this.
We don't need to test if it's empty or not.
We just need to test if it exists, if this thing exists, here's what we are going to do.
We are going to.
Hide.
All this section here with this idea of name feud.
So for this, we are going to use Jan.
This can be done easily with the Hyde method.
So we are going to hide that field before we go ahead.
Let's save this and let's see if this is working.
Refreshing the page, as you can see, we don't see that input for you anymore because it's.
Testing, if there's some name key in the local storage and in this case is just hiding that element
and now we just need to.
Show that other section.
Which is the welcome area.
So we are going to hide that first one and show the second one.
So welcome area and now the name of the method is going to be show, let's save this.
Let's go back there.
And now, as you can see, we are showing this, if we go back to the application and we clear it.
Refreshing the page again now is just showing the field.
Let's try again, let's try Maria Submit now it's starting to value if we refresh the page, we don't
see that field anymore.
We just see this element.
And before showing it, we just need to personalize this message, so let's do this now, first, we
have this welcome text.
So the welcome text.
Dot.
It's just going to be.
Let's just copy all this.
But instead of typing the name ourselves, we are going to concatenate it with the name we have on local
storage.
So local storage, not name.
And we need to do the same thing for this link, so the idea of this is the not me.
Button so.
Same thing here.
Then this is going to be not.
Then let's concatenated with the name.
And let's concatenated with a question mark.
All right, let's save this now, let's refresh the page.
And now, as you can see, it's showing the actual name, I just forgot to add a space here.
Let's do this now.
So high space and then the name.
Let's try it again.
Refreshing the page now we have hi, Maria, how are you?
And we have a not Maria button, let's clear the local storage for this.
Refresh the page now we are seeing that input field again.
Let's try a different name, John.
That segment when we refresh the page.
Now, we are not seeing that field anymore.
We are seeing a personalized message for John.
So now let's work on this.
Button here, because when we click it, we need to clear the local storage and show that input field
again.
So let's do this now.
Let's remember that this is the not me button.
So let's go back there and we can just copy this structure here because we already created a click function
before.
But this time is just going to be for the not me.
Without the E like this.
We don't need this line.
We don't need anything here, we just need the local storage just like that.
So when we click that button, we are just going to remove.
The name.
So we just need one argument for the remove item method, and we are going to do exactly the opposite
of what we are doing here, which is.
We are going to show.
The name field again.
And.
We are going to hide that welcome, Eric.
So let's hide it.
Let's go back there, let's refresh the page and now, since we already have a name here.
When we click this link, not John, then we just erased what's in the local storage and we are showing
this field again now if we refresh the page, we don't have anything in the local storage anymore.
So we are back with the input field.
Now, what we need to do is when I type the name for the first time, so I'm just going to type Maria
instead of just waiting to do this, when we refresh the page, let's do this right after typing the
name.
So right here.
Where we are just setting the name, we are also going to call a function, so let's create a function
here.
Which we can call it like Grete.
User.
So this is exactly what we are going to do.
We are going to copy all this code here inside a function.
Just like that.
And why are we doing this, because now when we load the page, if there's something in the local storage
that name, we can just.
Execute this function, so now we don't have to repeat it, because when we.
Type the name for the first time, not only we are going to set the item, but we are also going to
greet the user, which is automatically going to hide the food, form the message and then show that
welcome area.
Now, this should be better.
I'm just going to save this.
I'm going to refresh the page.
We already have a name here, so we are just seeing this.
So I'm just going to click not Maria.
So now we have the input field back.
Let's try, John.
I'm going to click submit.
And now we don't need to wait for the next page load to show this.
By the time the user types his name, we are going to show the message, which is really, really cool.
And now every time we load this page, this is going to be exactly the same.
So let's try a few more times.
Let's try a different name.
Let's say Paul.
Submit, if we click, not Paul, then when we go back, we never load the page again.
When we go back, we still have this name that we typed previously.
This is because when we submit the name after getting it and doing everything we need to do, we should
always clean it.
So let's do it like this, and if we pass an empty string in this vile method, then we are going to
claim that input after submitting the name.
So saving this.
Let's refresh the page again now, we don't have anything here, let me try, John, submit now.
Let's click here and now when we go back, there's nothing here anymore.
So let's try Maria.
Now, we are seeing this message now every time we load the page from now on.
So let me just copy this.
I'm just going to open this website from a new window.
Let's see, go back there, I still see that same personalized message, which is something really cool
that you can do with your website to be closer to your customers.
So, as always, if you have any questions about what we've just done, you can use the Q&A section
and I can help you out.
So that was all I wanted to show you for this video.
I'll see you in the next one.
Bye bye.