1
00:00:01,500 --> 00:00:02,610
Welcome back, ladies and gentlemen.

2
00:00:02,640 --> 00:00:08,850
Today, we're going to do we're going to try to save the local storage and grab that data and display

3
00:00:08,850 --> 00:00:15,550
back to our UI here, we will say, OK, we're going to have some data, and that's pretty much it.

4
00:00:15,750 --> 00:00:21,390
So what we need to do, we need to open up the index, our main controller.

5
00:00:21,720 --> 00:00:22,110
Right.

6
00:00:22,440 --> 00:00:27,180
And let's open the where we have all the event handlers here, event listeners.

7
00:00:27,630 --> 00:00:36,410
Now, I'm going to see five here and browser refresh like that, OK?

8
00:00:36,750 --> 00:00:38,430
And I'm going to add it on top here.

9
00:00:38,790 --> 00:00:47,640
So we need to add on the window, adding a listener and it will be a low load and it will not take any

10
00:00:47,640 --> 00:00:49,200
parameters, this function here.

11
00:00:50,730 --> 00:00:52,250
So it will be an error function.

12
00:00:52,270 --> 00:00:54,030
Make sure that you close this one at the end.

13
00:00:54,570 --> 00:00:55,860
Now, first things first.

14
00:00:57,120 --> 00:01:04,620
I want to add the window that data equal to that data.

15
00:01:04,890 --> 00:01:08,820
And we have the same code, same line here on top.

16
00:01:10,210 --> 00:01:10,750
Here it is.

17
00:01:11,050 --> 00:01:15,790
So actually, I'm going to delete it from here, but you can comment it out because in future, if you

18
00:01:15,790 --> 00:01:19,000
just rewind here, you will see, OK, I have it here now.

19
00:01:19,000 --> 00:01:20,230
I just moved it down here.

20
00:01:20,350 --> 00:01:21,730
Or you can add some comment.

21
00:01:22,180 --> 00:01:30,030
Now, a couple of other things that I want to add is actually to move this to two of this here.

22
00:01:30,100 --> 00:01:33,580
So first, let's first I'm going to move the like, right.

23
00:01:33,850 --> 00:01:34,870
We're going to work on the like.

24
00:01:35,410 --> 00:01:37,330
And I don't want to cause any more problems.

25
00:01:39,040 --> 00:01:40,990
So that will be our second line.

26
00:01:41,470 --> 00:01:47,860
So everything that we have just outside implemented somewhere outside, not in a function, not an event

27
00:01:47,860 --> 00:01:48,400
listener.

28
00:01:48,400 --> 00:01:49,450
So we can put it here.

29
00:01:49,660 --> 00:01:53,370
Right, because outside is not the place now.

30
00:01:54,280 --> 00:02:03,160
So data that like it will be equal to new like in now what we want to do is want to see data that like

31
00:02:03,610 --> 00:02:09,400
restore restored data, local storage.

32
00:02:10,360 --> 00:02:10,780
Right.

33
00:02:10,960 --> 00:02:20,110
So with this in our like control model, we actually have RESTOR data, local storage, and it will

34
00:02:20,110 --> 00:02:23,530
write down the likes that we have from the local storage.

35
00:02:23,530 --> 00:02:26,420
It will put them back in the likes area.

36
00:02:26,620 --> 00:02:27,890
So that's what we are doing here.

37
00:02:28,390 --> 00:02:33,320
Now, if we have anything, actually, because we are checking if we don't have nothing will happen.

38
00:02:34,000 --> 00:02:35,710
So that is pretty much it.

39
00:02:36,680 --> 00:02:41,200
Now we need to display the links from the local store.

40
00:02:41,520 --> 00:02:42,400
How are we going to do this?

41
00:02:43,000 --> 00:02:49,870
Display the the likes from power storage.

42
00:02:51,010 --> 00:02:52,630
Oh, how are we going to do this?

43
00:02:52,810 --> 00:02:59,350
So I'm going to create a one constant here or a variable you can see likes just like before.

44
00:02:59,500 --> 00:03:06,100
And that will be equal to the data that like that show not list likes.

45
00:03:06,670 --> 00:03:14,200
And this method, by the way, show likes was returning the entire array here, because remember, after

46
00:03:14,200 --> 00:03:20,590
calling this method, if we have something in local storage, it will be saved back into this array.

47
00:03:20,740 --> 00:03:24,070
And that's why we can just see what's happening here now.

48
00:03:24,280 --> 00:03:26,410
Cost likes, equal data lags.

49
00:03:26,410 --> 00:03:30,340
And we are just calling the show like method on it now.

50
00:03:30,640 --> 00:03:36,520
It will be stored this the entire array that we return and it will be stored here so we can do a foreach.

51
00:03:36,700 --> 00:03:39,940
So like that for each.

52
00:03:39,970 --> 00:03:42,630
So pretty much the same as a controller that we did.

53
00:03:43,030 --> 00:03:52,330
So I have the access to the current element and here I am going to see, just like you, the display

54
00:03:52,720 --> 00:03:58,600
like model, not model that I have before and the element.

55
00:03:59,260 --> 00:04:01,690
So that is pretty much what we need to do.

56
00:04:02,230 --> 00:04:11,410
So let's have it and let's go back here, refresh, make sure that nothing is wrong or inspect the console.

57
00:04:12,160 --> 00:04:13,670
And we don't have any problems.

58
00:04:13,690 --> 00:04:15,160
Let's load a movie here.

59
00:04:15,610 --> 00:04:21,460
Oh, actually, let's test to see if anything, we have it first because we were playing around last

60
00:04:21,460 --> 00:04:21,760
time.

61
00:04:21,940 --> 00:04:23,700
So the local store is not clear.

62
00:04:23,950 --> 00:04:24,390
Right.

63
00:04:25,840 --> 00:04:27,460
Make sure that local storage is done.

64
00:04:27,820 --> 00:04:30,490
Now, if you go back to local storage, it will be zero.

65
00:04:30,830 --> 00:04:34,030
OK, and also go back to the data and see what we have.

66
00:04:34,040 --> 00:04:38,320
OK, again, we do have the like, although we refresh it right.

67
00:04:39,070 --> 00:04:46,810
Because that like is coming from the line here because this is on we had we added the event listener

68
00:04:46,880 --> 00:04:53,050
on window object and it's load and here we can just see browser.

69
00:04:55,550 --> 00:05:01,670
Refresh that and just give it the breathing space, also breathing space from here.

70
00:05:02,240 --> 00:05:02,480
Good.

71
00:05:03,210 --> 00:05:06,140
Now let's test it out.

72
00:05:06,170 --> 00:05:09,680
So what we need to do is actually to search for a movie.

73
00:05:09,950 --> 00:05:11,110
Just going to close this one.

74
00:05:11,600 --> 00:05:16,960
And I'm going to add a movie here and it's there right now.

75
00:05:17,210 --> 00:05:22,400
If I refresh, it's still not the movie is actually liked.

76
00:05:22,760 --> 00:05:23,160
Right.

77
00:05:23,840 --> 00:05:29,570
So we know that something is in the local storage and plus we do have here, but it's not there.

78
00:05:29,750 --> 00:05:30,110
Right.

79
00:05:30,140 --> 00:05:33,720
So we something something is missing here now.

80
00:05:36,380 --> 00:05:40,120
So we need to call a method called display like no here.

81
00:05:40,520 --> 00:05:44,320
And that will be like no.

82
00:05:45,170 --> 00:05:55,250
And we will say, like you that display like no in here we need to pass what data that like that number

83
00:05:55,250 --> 00:05:56,210
of links.

84
00:05:58,070 --> 00:06:02,750
And I should be able to get that number.

85
00:06:02,960 --> 00:06:05,090
And by the way, this was a function.

86
00:06:05,090 --> 00:06:09,050
Remember, we do have it in like a number of flags.

87
00:06:09,260 --> 00:06:14,810
And I'm calling on the like view display like, no, nice.

88
00:06:15,230 --> 00:06:16,910
So let's say save it here.

89
00:06:17,120 --> 00:06:18,110
And I haven't done that.

90
00:06:18,110 --> 00:06:18,770
Just save it.

91
00:06:18,770 --> 00:06:19,290
Refraction.

92
00:06:19,310 --> 00:06:19,880
Here it is.

93
00:06:20,840 --> 00:06:26,080
So if I refresh now, if I even go back here, it will stay there.

94
00:06:26,600 --> 00:06:27,110
Right.

95
00:06:27,410 --> 00:06:29,930
So if I go back here, I can unlock it.

96
00:06:30,200 --> 00:06:34,580
And now I know we have another problem.

97
00:06:34,730 --> 00:06:36,540
OK, so that problem I will just show you.

98
00:06:36,560 --> 00:06:38,510
So it is working, right?

99
00:06:39,170 --> 00:06:40,630
See, the number is changing.

100
00:06:40,880 --> 00:06:47,380
It's adding up if we refresh it, staying there, if we just remove this one, it will stay there.

101
00:06:47,480 --> 00:06:57,260
But the thing is that when we click here to unlike we have the method in our lives here to see the light

102
00:06:57,260 --> 00:06:57,750
movie.

103
00:06:58,070 --> 00:07:03,440
So what we need here is actually to call this that versus the locally.

104
00:07:04,490 --> 00:07:05,030
Why?

105
00:07:05,030 --> 00:07:12,320
Because when we are deleting movie, I just want this to go back here and to grab that, because here

106
00:07:12,320 --> 00:07:17,450
we are removing from the likes from the likes area.

107
00:07:17,450 --> 00:07:22,100
We just remove that one from the with that particularity we remove the like movie.

108
00:07:22,370 --> 00:07:25,310
And now I just want to go back to the data and save it.

109
00:07:26,420 --> 00:07:30,410
Then you the newly created or deleted item from that.

110
00:07:30,410 --> 00:07:31,640
I'm so sorry.

111
00:07:31,850 --> 00:07:39,400
So I just want to save the array that has one element less than previous because we deleted that one.

112
00:07:39,620 --> 00:07:40,900
So save it now.

113
00:07:42,410 --> 00:07:43,650
So now it's going to work.

114
00:07:44,120 --> 00:07:47,170
So if I click it here, it's zero.

115
00:07:47,180 --> 00:07:53,750
So if I refresh or if I delete the entire thing and I go back, I should be able to see zero right before

116
00:07:53,960 --> 00:07:54,500
back.

117
00:07:54,520 --> 00:08:01,490
The the local storage did had that one in the storage that still had that number.

118
00:08:01,550 --> 00:08:04,840
OK, now that is for you likes.

119
00:08:05,300 --> 00:08:10,970
So we go back here and we need to say we need to display

120
00:08:13,880 --> 00:08:16,970
the card from local groups,

121
00:08:20,210 --> 00:08:21,140
local storage.

122
00:08:21,500 --> 00:08:31,390
Now here I'm going to put data that like a solid data about a card, but I need to grab it from top.

123
00:08:32,420 --> 00:08:36,110
It was in the movie controller, so I don't need it here anymore.

124
00:08:37,280 --> 00:08:37,640
Right.

125
00:08:37,670 --> 00:08:41,330
This was just for testing and now it's the time that we need to fix it.

126
00:08:41,720 --> 00:08:44,120
And you can put it up here.

127
00:08:44,120 --> 00:08:45,770
But I really.

128
00:08:46,700 --> 00:08:53,450
Well, yeah, the better it's to be up here, everything that we need to declare and the it should go

129
00:08:53,510 --> 00:08:54,160
first.

130
00:08:54,560 --> 00:08:56,580
Now this little card from the local storage.

131
00:08:57,530 --> 00:09:02,540
So what we need here first we need to create that card.

132
00:09:02,540 --> 00:09:08,390
So the car I want to restore the same data sorry.

133
00:09:08,930 --> 00:09:10,070
Later that car.

134
00:09:10,280 --> 00:09:14,600
And I want to restore the data from the local storage.

135
00:09:15,100 --> 00:09:15,500
Cool.

136
00:09:15,800 --> 00:09:18,360
So I will grab it and I will save it back to the car.

137
00:09:19,080 --> 00:09:26,170
Now the next thing is to see, to create a variable called movies that will hold the entire movies array.

138
00:09:26,210 --> 00:09:31,060
And how is that data, that car, that show list.

139
00:09:31,130 --> 00:09:37,610
Now, if this show list is a confusing for you guys, make sure that you can change it in the indie

140
00:09:37,610 --> 00:09:38,150
movies.

141
00:09:38,150 --> 00:09:38,480
Right.

142
00:09:41,600 --> 00:09:43,790
Sorry, Indy car, actually not in the movies.

143
00:09:48,150 --> 00:09:51,840
Show list, it can be a show movie list, right?

144
00:09:52,350 --> 00:09:57,250
So that was probably a better name now, but if you change it, we have somewhere else here.

145
00:09:57,420 --> 00:09:58,900
Make sure you change it everywhere.

146
00:09:59,130 --> 00:10:04,140
So in this constant I return the entire movies are movies, items, array.

147
00:10:04,380 --> 00:10:08,670
So I have this access and I can use that to loop through it.

148
00:10:08,910 --> 00:10:16,420
So movies that for each I'm going to pass the current element in here.

149
00:10:16,470 --> 00:10:18,600
Same old card view.

150
00:10:18,720 --> 00:10:19,070
Oops.

151
00:10:23,190 --> 00:10:32,790
Big display movie item in here, I'm going to pass the element that's pretty much it now.

152
00:10:33,210 --> 00:10:43,080
Also, I just want to see if the concert card number and this number, we will use it to display it

153
00:10:43,080 --> 00:10:43,440
here.

154
00:10:43,710 --> 00:10:44,130
Right.

155
00:10:44,970 --> 00:10:50,940
So card number, it will be data, that card, that show show list.

156
00:10:51,210 --> 00:10:56,280
And this actually going to return the entire area in here.

157
00:10:56,280 --> 00:11:07,200
I'm just going to say card for you that display card number and I'm going to pass this card number card

158
00:11:07,200 --> 00:11:09,870
number that length.

159
00:11:12,220 --> 00:11:19,000
And that should be the one so card no here I'm going to say car.

160
00:11:22,360 --> 00:11:34,030
OK, now let's search for a movie and this movie here, I'm going to do a browser refresh and the movie

161
00:11:34,030 --> 00:11:34,590
is not there.

162
00:11:34,600 --> 00:11:36,210
By the way, what's happening?

163
00:11:36,220 --> 00:11:36,750
Let's see.

164
00:11:37,120 --> 00:11:38,040
We had some error.

165
00:11:38,890 --> 00:11:41,170
Is property parent element of no.

166
00:11:42,160 --> 00:11:46,870
So the movie item in a car view J.S. 13.

167
00:11:47,740 --> 00:11:48,630
Why is this happening?

168
00:11:51,010 --> 00:11:55,790
And let's look back into our current view.

169
00:11:55,820 --> 00:12:01,210
So what is happening here is saying that is a model, the movie idea, but why are you calling this

170
00:12:01,210 --> 00:12:01,450
one?

171
00:12:03,890 --> 00:12:09,340
OK, yes, he here, just instead of displaying movie item, I'm just deleting movie items, so display

172
00:12:10,070 --> 00:12:14,780
movie item, that's that was something that OK, that was the error over there.

173
00:12:15,260 --> 00:12:18,920
OK, so I'm going to refresh now and here we go.

174
00:12:18,920 --> 00:12:20,960
Actually, the one that we saved is still there.

175
00:12:21,620 --> 00:12:29,020
Now, if I go back here, I can be able to delete it and let's let's refresh movie.

176
00:12:30,110 --> 00:12:31,730
So I'm going to like one.

177
00:12:33,600 --> 00:12:35,720
And actually we don't delete that one.

178
00:12:35,720 --> 00:12:36,040
Right.

179
00:12:36,800 --> 00:12:38,810
That's another mistake that we need to fix it.

180
00:12:38,960 --> 00:12:44,630
Same as in like we just when we are deleting like a movie, we need to do the same thing.

181
00:12:44,630 --> 00:12:49,490
When we are deleting a movie from the card, we need to call this function cool.

182
00:12:49,850 --> 00:12:55,530
Now, what I'm going to do here, I'm just going to clear this console up.

183
00:12:56,710 --> 00:12:59,690
So what we're going to do is the local storage clear.

184
00:12:59,810 --> 00:13:01,310
We're going to call this method clear.

185
00:13:01,880 --> 00:13:03,690
And I want to be clear.

186
00:13:04,070 --> 00:13:04,760
Nice.

187
00:13:07,020 --> 00:13:07,610
Here it is.

188
00:13:07,980 --> 00:13:11,570
Doesn't matter how many times I refresh now, it's not going to have anything.

189
00:13:11,570 --> 00:13:13,400
So, OK, so we go back to the movie.

190
00:13:14,270 --> 00:13:16,090
We're going to add a movie, right.

191
00:13:16,490 --> 00:13:18,860
We're going to refresh the movie will stay there.

192
00:13:19,070 --> 00:13:20,150
We're going to delete it.

193
00:13:20,180 --> 00:13:21,110
We're going to refresh.

194
00:13:21,530 --> 00:13:24,230
And yeah, something went wrong because we don't have any movie there.

195
00:13:24,290 --> 00:13:24,640
Right.

196
00:13:25,130 --> 00:13:27,140
So that is pretty much it.

197
00:13:27,800 --> 00:13:29,060
Let's sorry.

198
00:13:29,120 --> 00:13:38,180
Let's search for movies and like this one you can like the other one, get like that one.

199
00:13:38,210 --> 00:13:44,330
OK, and also we can add this two core and add these two car.

200
00:13:44,450 --> 00:13:44,890
Nice.

201
00:13:44,890 --> 00:13:47,360
So I have two car movies too.

202
00:13:47,360 --> 00:13:47,900
In the car.

203
00:13:48,050 --> 00:13:49,550
In three in the like.

204
00:13:49,640 --> 00:13:50,060
Right.

205
00:13:50,300 --> 00:13:54,320
So now if I go back here I will not have any problem.

206
00:13:54,470 --> 00:13:54,770
Why.

207
00:13:54,770 --> 00:13:56,820
Because they will stay in this storage.

208
00:13:56,840 --> 00:14:05,990
I'm going to delete both of them and I'm going to go here and going to like oh I'm going to like all

209
00:14:05,990 --> 00:14:08,510
of them actually.

210
00:14:08,510 --> 00:14:09,200
I'm going to leave one.

211
00:14:09,200 --> 00:14:14,120
OK, so if I refresh now, I will have only one stayed there.

212
00:14:14,120 --> 00:14:14,480
Right.

213
00:14:14,960 --> 00:14:15,740
Nothing else.

214
00:14:16,160 --> 00:14:22,430
So if I go there, here can actually the our logic is working.

215
00:14:22,430 --> 00:14:30,830
So we were able to see, we were able to save the data, to store the data, to persist that data onto

216
00:14:30,830 --> 00:14:35,860
a local storage and also at the end just to grab it here and to display it back.

217
00:14:35,870 --> 00:14:41,360
So this is pretty much powerful because no matter what happens, it will work.

218
00:14:41,550 --> 00:14:41,950
Right.

219
00:14:42,200 --> 00:14:43,760
So let me just show you one more thing.

220
00:14:44,060 --> 00:14:49,310
I think when we are just saying move here, just add this one.

221
00:14:49,850 --> 00:14:54,710
So I have one light and one one like in one in the car.

222
00:14:54,980 --> 00:14:57,320
So I'm just going to copy this localhost.

223
00:14:57,530 --> 00:14:58,850
I'm going to close it here.

224
00:14:59,180 --> 00:14:59,570
Right.

225
00:14:59,940 --> 00:15:03,470
And I'm going to say Google again and I'm going to base that back.

226
00:15:03,470 --> 00:15:04,160
This one here.

227
00:15:04,910 --> 00:15:07,190
Now, this is happening with the local storage.

228
00:15:07,190 --> 00:15:09,440
A local storage still holds that information.

229
00:15:10,190 --> 00:15:13,610
The same one here, the scary movie and the same one here.

230
00:15:13,640 --> 00:15:14,050
Right.

231
00:15:14,480 --> 00:15:15,020
Nice.

232
00:15:15,860 --> 00:15:20,150
So that means it's perfectly working as it should.

233
00:15:21,080 --> 00:15:24,320
And we can still go like it or I like we can refresh.

234
00:15:24,830 --> 00:15:25,640
Nothing will happen.

235
00:15:25,760 --> 00:15:27,350
OK, that is pretty much it.

236
00:15:27,620 --> 00:15:30,200
And I'm super happy that we have done this.

237
00:15:30,500 --> 00:15:34,460
So the entire project is now considered as complete.

238
00:15:35,120 --> 00:15:37,880
So what else we can do here?

239
00:15:37,880 --> 00:15:42,020
We can just remove some of the comments here.

240
00:15:42,050 --> 00:15:46,550
Actually, I don't have too many comments, but when I type movie, we just bring out the array.

241
00:15:46,820 --> 00:15:47,150
Right?

242
00:15:47,160 --> 00:15:51,400
So what we can do is actually go back and strife.

243
00:15:51,410 --> 00:15:56,990
We have console log here it is the query, some searching, but we have Consolo.

244
00:15:58,880 --> 00:16:04,370
This one here knows what else we do have here.

245
00:16:06,170 --> 00:16:09,920
The description actually we haven't as the description.

246
00:16:09,920 --> 00:16:16,730
And that's a good opportunity now to do this in lovely day like here.

247
00:16:16,730 --> 00:16:25,310
Again, we do have consultatively like, yeah, I think we are all OK, save this one.

248
00:16:25,880 --> 00:16:28,190
Now I'm going to search a movie here.

249
00:16:30,110 --> 00:16:31,790
I'm going to go back to this movie.

250
00:16:32,750 --> 00:16:34,790
I'm going to like I'm going to increase it.

251
00:16:34,790 --> 00:16:36,020
I'm going to buy tickets.

252
00:16:36,650 --> 00:16:38,540
See, everything is working nice.

253
00:16:38,540 --> 00:16:44,300
Let's see this one increase it reviews cast and crew, media.

254
00:16:44,600 --> 00:16:45,770
The stars are there.

255
00:16:45,770 --> 00:16:49,670
One, two, three, four, five, six, seven and a half.

256
00:16:50,030 --> 00:16:50,420
Why?

257
00:16:50,420 --> 00:16:51,860
Because it's always working like that.

258
00:16:51,860 --> 00:16:53,210
Here is a six point two.

259
00:16:53,330 --> 00:16:57,230
One, two, three, four, five, six and a half stars.

260
00:16:57,530 --> 00:17:00,230
Pretty much everything that we were looking for.

261
00:17:00,230 --> 00:17:00,530
Right.

262
00:17:00,530 --> 00:17:02,600
Even this working in.

263
00:17:02,870 --> 00:17:05,470
It's pretty much it for this awesome project.

264
00:17:05,750 --> 00:17:07,940
Now let me just check the specter again.

265
00:17:07,970 --> 00:17:09,050
Do we have some myths here?

266
00:17:09,090 --> 00:17:09,350
No.

267
00:17:09,770 --> 00:17:13,310
So that is pretty much for this project.

268
00:17:13,310 --> 00:17:16,820
And I will add more lectures probably in future.

269
00:17:17,090 --> 00:17:19,400
Those lectures will be additional lectures.

270
00:17:19,400 --> 00:17:26,240
So if you don't understand a couple of things here or not not here in general, when I say in the entire

271
00:17:26,240 --> 00:17:32,450
course, so I will add extra additional exercise for you guys, some of them, you will find it easy

272
00:17:32,450 --> 00:17:37,580
because if you know how to do this, you don't probably not going to need them, but it's not going

273
00:17:37,580 --> 00:17:41,180
to it's not going to affect your time too much if you just check them out.

274
00:17:41,420 --> 00:17:49,370
So everything that I will put extra after this, I will state it as additional exercises and also make

275
00:17:49,370 --> 00:17:53,930
sure that you check the following lectures that I have after this project.

276
00:17:53,940 --> 00:17:54,830
So thank you very much.

277
00:17:54,830 --> 00:17:56,300
And I will see you in the next one.