1
00:00:00,780 --> 00:00:01,360
All right guys.

2
00:00:01,360 --> 00:00:04,290
Now we have our UI done here.

3
00:00:04,290 --> 00:00:10,800
I want to persist the data to local storage so that when we add a task that actually stays instead of

4
00:00:10,800 --> 00:00:13,350
just reloading and having it go away.

5
00:00:13,420 --> 00:00:17,610
So local storage is part of javascript.

6
00:00:17,610 --> 00:00:21,430
We don't have to use any third party library or anything like that.

7
00:00:21,900 --> 00:00:23,370
So we can just go ahead and use it.

8
00:00:23,370 --> 00:00:31,110
So let's go down to the task function and after we actually added to the DOM with this chunk of code

9
00:00:31,110 --> 00:00:39,510
right here we're going to go ahead and call another function called Let's just say store in glocal storage

10
00:00:39,570 --> 00:00:44,460
and we'll call this store task in

11
00:00:47,130 --> 00:00:49,220
local storage.

12
00:00:50,080 --> 00:00:50,590
OK.

13
00:00:50,610 --> 00:00:57,510
And we're going to want to see we're going to want to add in here the task which comes from the value

14
00:00:57,540 --> 00:01:00,690
of let's see where is it right here.

15
00:01:00,690 --> 00:01:05,080
This task input values so we can pass that in light that.

16
00:01:05,190 --> 00:01:08,550
So whatever's typed in here will get passed in here.

17
00:01:08,550 --> 00:01:21,160
So let's go right under the ADD task function and create this one so will say function store task in

18
00:01:21,160 --> 00:01:27,670
local storage that will take in the task.

19
00:01:28,180 --> 00:01:35,440
And then what we want to do is define or initialize a variable called tasks and then we want to check

20
00:01:35,440 --> 00:01:38,880
local storage to see if there's any tasks in there.

21
00:01:39,040 --> 00:01:51,310
So we do that by saying if local storage Daut get item tasks if that is really cool to know that means

22
00:01:51,310 --> 00:02:00,110
there's nothing in there so that tasks variable I'm just going to set that to an empty array else.

23
00:02:00,580 --> 00:02:05,470
Then we want to set tasks equal to whatever's in local storage.

24
00:02:05,470 --> 00:02:08,760
Now remember our local storage can only store strings.

25
00:02:08,950 --> 00:02:13,200
So we're going to have to parse it as Jason when it comes out.

26
00:02:13,210 --> 00:02:25,960
So let's say Jason parce and then and here we'll get local storage get item tasks like that.

27
00:02:25,960 --> 00:02:26,530
All right.

28
00:02:26,740 --> 00:02:30,130
And then what we want to do is push on to that variable.

29
00:02:30,190 --> 00:02:37,510
So tasks start push and then pass in the task that was passed in here as a parameter.

30
00:02:37,510 --> 00:02:40,200
So we're adding it onto this array right here.

31
00:02:40,300 --> 00:02:44,320
And then the last thing we want to do is send it back to local storage.

32
00:02:44,320 --> 00:02:46,460
So set item.

33
00:02:47,170 --> 00:02:49,420
Now remember it has to be stored as a string.

34
00:02:49,480 --> 00:02:55,420
So we're going to store tasks and then we want to store the variable task what we want to wrap it in

35
00:02:55,420 --> 00:03:02,680
a function call Jason Daut string ify so that we can actually store it.

36
00:03:02,710 --> 00:03:11,350
All right so let's save and now will go hand-mill say walk the dog and we'll add it.

37
00:03:11,470 --> 00:03:12,760
So it gets added here.

38
00:03:12,760 --> 00:03:14,950
Now if I reload it's going to go away.

39
00:03:15,160 --> 00:03:22,270
But if we look down here in the console or in Chrome tools and we go to application and we click on

40
00:03:22,270 --> 00:03:28,720
local storage over here you can see tasks and we have that walk the dog value.

41
00:03:28,990 --> 00:03:32,350
All right so it is being persisted to local storage.

42
00:03:32,350 --> 00:03:36,420
Now the next thing we want to do is show it inside the UL here.

43
00:03:36,610 --> 00:03:40,210
So for that we're going to create another function.

44
00:03:40,210 --> 00:03:45,680
Now in addition to the function we need an event to load for the function to be called.

45
00:03:45,760 --> 00:03:56,090
So in the Load event listeners are going to create a dorm load of event.

46
00:03:56,250 --> 00:04:02,450
So for this we're going to say document and we're going to call an out event listener right on the document.

47
00:04:02,700 --> 00:04:10,170
And we're going to call it we're going to listen for dorm content loaded OK which is an event where

48
00:04:10,500 --> 00:04:16,610
that gets called out right after the dorm is loaded and then we're going to call get tasks.

49
00:04:16,650 --> 00:04:20,720
All right so now we'll go right down here.

50
00:04:22,530 --> 00:04:27,110
Say get tasks from last function

51
00:04:29,720 --> 00:04:33,050
say function get tasks

52
00:04:37,970 --> 00:04:44,560
and let's see we're going to again who's going to go down here and copy this

53
00:04:48,200 --> 00:04:53,360
and pace in here so we're going to initialize task check to see if there's anything there.

54
00:04:53,600 --> 00:04:54,550
If there isn't.

55
00:04:54,650 --> 00:05:02,690
Set it to an empty array if there is set it to whatever is there and then we want to loop through these

56
00:05:02,690 --> 00:05:04,600
tasks that are there.

57
00:05:05,060 --> 00:05:09,490
OK we're going to do that with a For Each loop.

58
00:05:10,690 --> 00:05:21,510
So we'll say function and in here we'll just call this task for each one.

59
00:05:21,560 --> 00:05:22,070
All right.

60
00:05:22,090 --> 00:05:27,760
And then inside the for each we basically want to just create the dorm element so just like we did with

61
00:05:27,760 --> 00:05:29,080
ADD task.

62
00:05:29,080 --> 00:05:35,440
I'm going to copy from here down to here.

63
00:05:35,520 --> 00:05:36,810
So we're going to copy all that.

64
00:05:36,810 --> 00:05:38,940
We're going to put that inside for each.

65
00:05:38,970 --> 00:05:41,310
That's going to happen for each task.

66
00:05:43,290 --> 00:05:45,730
So let's go ahead and save that.

67
00:05:45,840 --> 00:05:52,830
Now you see that the text isn't showing because the text node is saying task input value there is no

68
00:05:52,830 --> 00:05:55,050
task input value in this case.

69
00:05:55,140 --> 00:05:57,470
In this case it's coming from this.

70
00:05:57,560 --> 00:05:58,980
It's coming from tasks.

71
00:05:58,990 --> 00:06:04,340
That's what we want to put in here save and there we go.

72
00:06:04,340 --> 00:06:06,950
So now if I reload you'll see it's still there.

73
00:06:06,950 --> 00:06:15,390
If I go appear and say Pick up the kids from school and we add that task and reload it stays there because

74
00:06:15,390 --> 00:06:21,030
it's being persisted to local storage and then when the page loads when the dorm loads it's coming from

75
00:06:21,030 --> 00:06:22,860
local storage.

76
00:06:22,860 --> 00:06:24,900
All right so now we want to do the delete.

77
00:06:24,900 --> 00:06:28,300
If I delete it goes away and the UI would if I reload.

78
00:06:28,300 --> 00:06:33,030
It's still there because we didn't actually delete it from local storage.

79
00:06:33,090 --> 00:06:39,910
So let's go down to remove tasks or remove task.

80
00:06:40,170 --> 00:06:52,050
And we want to go right here after we remove it from the dorm and say remove from the last cells remove

81
00:06:52,950 --> 00:06:59,280
task from local storage.

82
00:06:59,280 --> 00:06:59,630
All right.

83
00:06:59,640 --> 00:07:00,460
Now this.

84
00:07:00,510 --> 00:07:05,500
This is kind of weird because we don't have like an idea or anything we can pass in here.

85
00:07:05,600 --> 00:07:14,120
What we'll have to pass in is the actual element which is going to be the ally which is this right here.

86
00:07:14,200 --> 00:07:21,610
So if we go ahead and pass that in and then we go and we create a function to say remove

87
00:07:26,960 --> 00:07:34,470
so removed from local storage and it's going to be passed in a task item.

88
00:07:34,820 --> 00:07:44,020
So far we're two console dog log task item and save and then go ahead and click that.

89
00:07:44,110 --> 00:07:44,720
OK.

90
00:07:44,720 --> 00:07:47,300
And you'll see that it will log the list item.

91
00:07:47,330 --> 00:07:50,230
So that's what we're getting here inside this function.

92
00:07:50,510 --> 00:07:55,540
So what I want to do is first check local storage.

93
00:07:55,610 --> 00:07:58,850
Put it into a variable just like we did here

94
00:08:02,490 --> 00:08:07,170
so we're going to go ahead and put that in check to see if it's now.

95
00:08:07,710 --> 00:08:13,620
If it is then it's an empty array if not then we're going to set this variable then we're going to loop

96
00:08:13,620 --> 00:08:17,140
through it.

97
00:08:17,250 --> 00:08:18,720
So for each

98
00:08:25,860 --> 00:08:31,120
case we're going to loop through the tasks and then what we're going to do is do an if statement we're

99
00:08:31,120 --> 00:08:40,960
going to check to see if the task item text content text content will be the actual text of the task.

100
00:08:40,960 --> 00:08:47,560
We want to see if that matches if that equals the current task in the iteration.

101
00:08:47,560 --> 00:08:50,400
If it does we know that's the one we want to delete.

102
00:08:50,440 --> 00:09:00,580
So we're going to say task Stott's splice and we can actually get the index by putting it as a second

103
00:09:00,580 --> 00:09:05,330
parameter of the foreach or the for each callback rather.

104
00:09:05,560 --> 00:09:11,690
And then we can pay put in here the index and we want to delete one from the index.

105
00:09:11,710 --> 00:09:19,660
All right then all we have to do is go under the foreach and set local storage again.

106
00:09:24,910 --> 00:09:32,230
OK we have to wrap this in Jason docstring of fi and passen tasks.

107
00:09:32,230 --> 00:09:33,700
All right so let's save that.

108
00:09:33,740 --> 00:09:34,770
And now if I delete.

109
00:09:34,780 --> 00:09:38,290
Pick up kids from school and now reload.

110
00:09:38,290 --> 00:09:39,350
It's still gone.

111
00:09:39,430 --> 00:09:42,760
OK it was gone it's gone from local storage.

112
00:09:43,810 --> 00:09:49,810
So the last thing we want to do is declare tasks right now if I clear it goes away with if I reload

113
00:09:49,810 --> 00:09:50,980
it's back.

114
00:09:50,980 --> 00:09:56,300
We need to actually clear it from local storage so I'm going to go to the bottom of that clear a task

115
00:09:56,320 --> 00:09:56,920
function

116
00:09:59,690 --> 00:10:05,390
and let's call clear or clear tasks

117
00:10:09,370 --> 00:10:23,960
from local storage.

118
00:10:24,610 --> 00:10:31,270
And this is going to be very very simple we just need to call local storage dark clear and that clears

119
00:10:31,270 --> 00:10:32,080
out everything.

120
00:10:32,080 --> 00:10:38,150
So now if I go ahead and I could clear task goes away reload and it stays gone.

121
00:10:38,170 --> 00:10:38,470
All right.

122
00:10:38,470 --> 00:10:42,140
So we now have an application where we can create tasks.

123
00:10:42,160 --> 00:10:48,220
It gets persisted to local storage so we can leave and come back and it'll still be there and we can

124
00:10:48,220 --> 00:10:48,870
delete them.

125
00:10:48,880 --> 00:10:51,820
We can clear them and we can filter them.

126
00:10:51,820 --> 00:10:57,730
All right guys so I hope you enjoyed this project gives you some insight on how to work with the dorm

127
00:10:58,060 --> 00:11:01,170
how to work with local storage and that's it.

128
00:11:01,180 --> 00:11:03,140
I will see you in the next video.