1
00:00:07,690 --> 00:00:15,600
Hey, everyone, in this video, we're going to do this quick practical example using local storage,

2
00:00:15,880 --> 00:00:17,890
so here's what we're going to do.

3
00:00:18,100 --> 00:00:21,210
We have this input field for the name.

4
00:00:21,400 --> 00:00:25,240
So let's say I typed my name here when I click submit.

5
00:00:25,600 --> 00:00:30,670
What we are going to do is sending this information to the local storage.

6
00:00:31,010 --> 00:00:38,530
So once we have the name stored in the local storage, every time we load this page instead of showing

7
00:00:38,530 --> 00:00:45,370
this form again, what we are going to do is so we have this section called Name Field.

8
00:00:45,550 --> 00:00:46,900
We are going to hide it.

9
00:00:47,230 --> 00:00:49,720
So we are going to use this play.

10
00:00:50,050 --> 00:00:57,190
Norn and instead of showing this, we are going to show this area that's right after it, which is called

11
00:00:57,190 --> 00:00:58,430
Welcome Area.

12
00:00:59,260 --> 00:01:01,630
So this time we already have the name.

13
00:01:01,900 --> 00:01:03,640
So we are going to show this.

14
00:01:04,650 --> 00:01:12,870
Which has this greeting, so hi, Yvonne, how are you and then we also have this button right here.

15
00:01:13,910 --> 00:01:21,200
So no matter if I turn off my computer, restart it every time I go back to this website.

16
00:01:22,420 --> 00:01:29,530
Instead of seeing that input field, I will always see this personalized greeting, which is really,

17
00:01:29,530 --> 00:01:32,230
really cool unless I decide to click it.

18
00:01:32,500 --> 00:01:37,900
So let's say there's other people that use this computer and then I go here, I'm not Yvonne.

19
00:01:38,530 --> 00:01:39,940
I'm going to click here.

20
00:01:40,180 --> 00:01:46,940
And when the user clicks here, you need to clear the local storage and show the form again.

21
00:01:47,410 --> 00:01:49,270
So this is what we are going to do.

22
00:01:49,280 --> 00:01:51,510
This should be pretty simple to do.

23
00:01:51,790 --> 00:01:55,840
So let's get started with let me just refresh the page again.

24
00:01:57,780 --> 00:02:04,040
So let me get the IDs of the input field and the submit button so we can get started.

25
00:02:05,960 --> 00:02:08,870
So the input field is name user.

26
00:02:14,270 --> 00:02:17,030
And the submit button is.

27
00:02:18,430 --> 00:02:20,200
Submit name.

28
00:02:25,170 --> 00:02:30,590
All right, before we go ahead, let's go to the local storage just to make sure there's nothing there.

29
00:02:30,600 --> 00:02:32,160
So application.

30
00:02:33,790 --> 00:02:35,570
So here it is, local storage.

31
00:02:35,590 --> 00:02:40,390
There's nothing here, if you see something here, just clear it all so you can start fresh.

32
00:02:42,210 --> 00:02:48,420
So going to Visual Studio called, the first thing we are going to do is creating a click event for

33
00:02:48,420 --> 00:02:50,250
that submit button.

34
00:02:52,130 --> 00:02:54,650
So let's use Jay Quarrie for this.

35
00:02:56,980 --> 00:03:02,530
So the idea of that person is submit name when there's a click.

36
00:03:03,690 --> 00:03:11,400
Not Clark, but Clark event, we are going to pass this function that we know it's a callback function

37
00:03:11,400 --> 00:03:16,290
for this method and now when this happens, we're going to create a variable.

38
00:03:16,290 --> 00:03:21,810
So variable name, we are going to get what's inside that field.

39
00:03:23,490 --> 00:03:25,680
So name user.

40
00:03:31,850 --> 00:03:37,130
So now let's just do a quick test to see if this is not empty, so if.

41
00:03:38,510 --> 00:03:46,880
We know we can do this with the exclamation mark, so if there's no name means, which means that if

42
00:03:46,880 --> 00:03:48,110
this is empty.

43
00:03:49,750 --> 00:03:52,240
Then we are going to send an alert.

44
00:03:55,740 --> 00:03:58,890
Saying, please type your name.

45
00:04:05,230 --> 00:04:06,880
If this is not empty.

46
00:04:08,450 --> 00:04:15,350
This means that we can continue, so what we are going to do is sending that information to the local

47
00:04:15,350 --> 00:04:17,540
starch, so local storage.

48
00:04:19,550 --> 00:04:27,980
Not set item, I'm going to set a new item code name, and I'm going to send a person's name.

49
00:04:29,150 --> 00:04:31,220
All right, let's save this.

50
00:04:32,480 --> 00:04:41,090
Actually, one thing I forgot here, the name is not just selecting that input field, but we need to

51
00:04:41,090 --> 00:04:44,150
call the Volle method.

52
00:04:45,130 --> 00:04:48,800
So this is going to be the name, the value inside that field.

53
00:04:49,270 --> 00:04:52,600
Now we can save it and refresh the page.

54
00:04:54,790 --> 00:05:02,050
All right, so first let's try to click submit without typing in anything, so it's not accepting because

55
00:05:02,050 --> 00:05:03,800
it's empty, which is good.

56
00:05:04,180 --> 00:05:06,550
Now, let's try to add a name.

57
00:05:06,860 --> 00:05:09,610
Let's say, John, I'm going to click submit.

58
00:05:09,850 --> 00:05:14,860
And as you can see, the name has been sent to the local storage, which is good.

59
00:05:15,460 --> 00:05:21,610
Now, the next thing we need to do here is every time we load the page, we need to check if there's

60
00:05:21,730 --> 00:05:24,460
something on local storage with the name.

61
00:05:25,240 --> 00:05:26,430
Let's do this now.

62
00:05:30,030 --> 00:05:31,780
We can do this afterwards.

63
00:05:31,800 --> 00:05:38,010
That's not a problem, so every time we load the page, here's what we are going to do.

64
00:05:38,460 --> 00:05:40,940
We're going to start an if statement.

65
00:05:41,370 --> 00:05:42,360
So if.

66
00:05:43,440 --> 00:05:52,440
We have local storage dot name, so this means that that key exists and.

67
00:05:53,410 --> 00:06:00,040
We know for sure that if it exists, there's something there because we are not letting it send anything

68
00:06:00,460 --> 00:06:02,820
through that field if nothing is typed.

69
00:06:03,310 --> 00:06:06,340
So there's already a good level of protection on this.

70
00:06:06,350 --> 00:06:08,670
We don't need to test if it's empty or not.

71
00:06:08,680 --> 00:06:15,910
We just need to test if it exists, if this thing exists, here's what we are going to do.

72
00:06:16,660 --> 00:06:18,070
We are going to.

73
00:06:20,210 --> 00:06:20,780
Hide.

74
00:06:22,020 --> 00:06:25,890
All this section here with this idea of name feud.

75
00:06:29,010 --> 00:06:31,860
So for this, we are going to use Jan.

76
00:06:35,410 --> 00:06:39,010
This can be done easily with the Hyde method.

77
00:06:39,970 --> 00:06:43,840
So we are going to hide that field before we go ahead.

78
00:06:44,020 --> 00:06:46,860
Let's save this and let's see if this is working.

79
00:06:49,500 --> 00:06:55,830
Refreshing the page, as you can see, we don't see that input for you anymore because it's.

80
00:06:58,490 --> 00:07:06,050
Testing, if there's some name key in the local storage and in this case is just hiding that element

81
00:07:06,620 --> 00:07:08,810
and now we just need to.

82
00:07:10,850 --> 00:07:12,650
Show that other section.

83
00:07:13,590 --> 00:07:15,630
Which is the welcome area.

84
00:07:25,260 --> 00:07:29,790
So we are going to hide that first one and show the second one.

85
00:07:31,040 --> 00:07:37,160
So welcome area and now the name of the method is going to be show, let's save this.

86
00:07:37,680 --> 00:07:38,750
Let's go back there.

87
00:07:40,860 --> 00:07:47,970
And now, as you can see, we are showing this, if we go back to the application and we clear it.

88
00:07:48,930 --> 00:07:53,990
Refreshing the page again now is just showing the field.

89
00:07:54,270 --> 00:08:02,370
Let's try again, let's try Maria Submit now it's starting to value if we refresh the page, we don't

90
00:08:02,370 --> 00:08:03,840
see that field anymore.

91
00:08:03,840 --> 00:08:05,970
We just see this element.

92
00:08:07,160 --> 00:08:14,990
And before showing it, we just need to personalize this message, so let's do this now, first, we

93
00:08:14,990 --> 00:08:16,850
have this welcome text.

94
00:08:26,320 --> 00:08:27,880
So the welcome text.

95
00:08:29,110 --> 00:08:29,740
Dot.

96
00:08:36,810 --> 00:08:38,310
It's just going to be.

97
00:08:40,260 --> 00:08:42,120
Let's just copy all this.

98
00:08:47,530 --> 00:08:55,390
But instead of typing the name ourselves, we are going to concatenate it with the name we have on local

99
00:08:55,390 --> 00:08:55,960
storage.

100
00:08:56,140 --> 00:08:59,350
So local storage, not name.

101
00:09:00,690 --> 00:09:09,120
And we need to do the same thing for this link, so the idea of this is the not me.

102
00:09:12,800 --> 00:09:13,940
Button so.

103
00:09:16,750 --> 00:09:18,010
Same thing here.

104
00:09:27,370 --> 00:09:29,620
Then this is going to be not.

105
00:09:31,520 --> 00:09:34,520
Then let's concatenated with the name.

106
00:09:41,110 --> 00:09:46,720
And let's concatenated with a question mark.

107
00:09:47,080 --> 00:09:51,730
All right, let's save this now, let's refresh the page.

108
00:09:54,390 --> 00:10:00,720
And now, as you can see, it's showing the actual name, I just forgot to add a space here.

109
00:10:00,750 --> 00:10:01,850
Let's do this now.

110
00:10:02,220 --> 00:10:04,740
So high space and then the name.

111
00:10:05,040 --> 00:10:06,170
Let's try it again.

112
00:10:07,730 --> 00:10:11,650
Refreshing the page now we have hi, Maria, how are you?

113
00:10:11,660 --> 00:10:16,700
And we have a not Maria button, let's clear the local storage for this.

114
00:10:16,910 --> 00:10:21,710
Refresh the page now we are seeing that input field again.

115
00:10:21,830 --> 00:10:24,080
Let's try a different name, John.

116
00:10:24,410 --> 00:10:27,590
That segment when we refresh the page.

117
00:10:28,370 --> 00:10:30,740
Now, we are not seeing that field anymore.

118
00:10:30,740 --> 00:10:33,490
We are seeing a personalized message for John.

119
00:10:34,160 --> 00:10:36,200
So now let's work on this.

120
00:10:37,430 --> 00:10:44,420
Button here, because when we click it, we need to clear the local storage and show that input field

121
00:10:44,420 --> 00:10:44,970
again.

122
00:10:45,710 --> 00:10:47,180
So let's do this now.

123
00:10:47,330 --> 00:10:50,270
Let's remember that this is the not me button.

124
00:10:50,270 --> 00:10:57,380
So let's go back there and we can just copy this structure here because we already created a click function

125
00:10:57,380 --> 00:10:57,920
before.

126
00:10:58,340 --> 00:11:02,120
But this time is just going to be for the not me.

127
00:11:05,490 --> 00:11:07,320
Without the E like this.

128
00:11:08,560 --> 00:11:09,940
We don't need this line.

129
00:11:10,920 --> 00:11:16,440
We don't need anything here, we just need the local storage just like that.

130
00:11:17,850 --> 00:11:23,220
So when we click that button, we are just going to remove.

131
00:11:25,830 --> 00:11:26,460
The name.

132
00:11:27,970 --> 00:11:36,370
So we just need one argument for the remove item method, and we are going to do exactly the opposite

133
00:11:36,370 --> 00:11:38,470
of what we are doing here, which is.

134
00:11:41,050 --> 00:11:42,490
We are going to show.

135
00:11:44,280 --> 00:11:45,840
The name field again.

136
00:11:48,170 --> 00:11:48,950
And.

137
00:11:51,830 --> 00:11:55,090
We are going to hide that welcome, Eric.

138
00:11:56,290 --> 00:11:57,390
So let's hide it.

139
00:12:00,970 --> 00:12:07,090
Let's go back there, let's refresh the page and now, since we already have a name here.

140
00:12:08,910 --> 00:12:16,860
When we click this link, not John, then we just erased what's in the local storage and we are showing

141
00:12:16,860 --> 00:12:23,760
this field again now if we refresh the page, we don't have anything in the local storage anymore.

142
00:12:23,940 --> 00:12:27,030
So we are back with the input field.

143
00:12:28,020 --> 00:12:34,110
Now, what we need to do is when I type the name for the first time, so I'm just going to type Maria

144
00:12:34,290 --> 00:12:41,310
instead of just waiting to do this, when we refresh the page, let's do this right after typing the

145
00:12:41,310 --> 00:12:41,640
name.

146
00:12:43,260 --> 00:12:44,250
So right here.

147
00:12:45,280 --> 00:12:53,110
Where we are just setting the name, we are also going to call a function, so let's create a function

148
00:12:53,110 --> 00:12:53,410
here.

149
00:12:54,990 --> 00:12:57,960
Which we can call it like Grete.

150
00:12:59,760 --> 00:13:00,390
User.

151
00:13:03,640 --> 00:13:06,630
So this is exactly what we are going to do.

152
00:13:09,630 --> 00:13:14,670
We are going to copy all this code here inside a function.

153
00:13:16,410 --> 00:13:17,610
Just like that.

154
00:13:20,720 --> 00:13:28,280
And why are we doing this, because now when we load the page, if there's something in the local storage

155
00:13:28,280 --> 00:13:30,710
that name, we can just.

156
00:13:33,860 --> 00:13:39,950
Execute this function, so now we don't have to repeat it, because when we.

157
00:13:41,100 --> 00:13:48,420
Type the name for the first time, not only we are going to set the item, but we are also going to

158
00:13:48,420 --> 00:13:56,640
greet the user, which is automatically going to hide the food, form the message and then show that

159
00:13:56,640 --> 00:13:57,720
welcome area.

160
00:13:58,020 --> 00:14:00,100
Now, this should be better.

161
00:14:00,630 --> 00:14:02,330
I'm just going to save this.

162
00:14:03,030 --> 00:14:05,060
I'm going to refresh the page.

163
00:14:05,430 --> 00:14:09,600
We already have a name here, so we are just seeing this.

164
00:14:09,870 --> 00:14:12,160
So I'm just going to click not Maria.

165
00:14:12,300 --> 00:14:14,540
So now we have the input field back.

166
00:14:14,850 --> 00:14:16,590
Let's try, John.

167
00:14:17,100 --> 00:14:18,510
I'm going to click submit.

168
00:14:18,750 --> 00:14:23,660
And now we don't need to wait for the next page load to show this.

169
00:14:23,820 --> 00:14:30,330
By the time the user types his name, we are going to show the message, which is really, really cool.

170
00:14:30,340 --> 00:14:35,440
And now every time we load this page, this is going to be exactly the same.

171
00:14:35,460 --> 00:14:37,340
So let's try a few more times.

172
00:14:37,350 --> 00:14:39,120
Let's try a different name.

173
00:14:39,570 --> 00:14:40,620
Let's say Paul.

174
00:14:41,980 --> 00:14:48,940
Submit, if we click, not Paul, then when we go back, we never load the page again.

175
00:14:48,940 --> 00:14:53,670
When we go back, we still have this name that we typed previously.

176
00:14:54,010 --> 00:15:01,300
This is because when we submit the name after getting it and doing everything we need to do, we should

177
00:15:01,300 --> 00:15:02,650
always clean it.

178
00:15:05,370 --> 00:15:13,620
So let's do it like this, and if we pass an empty string in this vile method, then we are going to

179
00:15:13,620 --> 00:15:17,160
claim that input after submitting the name.

180
00:15:18,350 --> 00:15:19,580
So saving this.

181
00:15:21,440 --> 00:15:31,400
Let's refresh the page again now, we don't have anything here, let me try, John, submit now.

182
00:15:31,400 --> 00:15:35,390
Let's click here and now when we go back, there's nothing here anymore.

183
00:15:35,670 --> 00:15:37,360
So let's try Maria.

184
00:15:37,730 --> 00:15:42,590
Now, we are seeing this message now every time we load the page from now on.

185
00:15:42,800 --> 00:15:44,660
So let me just copy this.

186
00:15:45,440 --> 00:15:48,680
I'm just going to open this website from a new window.

187
00:15:51,120 --> 00:15:59,490
Let's see, go back there, I still see that same personalized message, which is something really cool

188
00:15:59,490 --> 00:16:04,030
that you can do with your website to be closer to your customers.

189
00:16:04,410 --> 00:16:11,370
So, as always, if you have any questions about what we've just done, you can use the Q&A section

190
00:16:11,370 --> 00:16:12,730
and I can help you out.

191
00:16:13,230 --> 00:16:15,870
So that was all I wanted to show you for this video.

192
00:16:15,900 --> 00:16:17,460
I'll see you in the next one.

193
00:16:17,760 --> 00:16:18,270
Bye bye.