1 00:00:00,600 --> 00:00:04,350 All right guys in this video we're going to talk with a local in-session storage. 2 00:00:04,350 --> 00:00:10,050 I know this is a little different from the rest of the lectures in this section because we've been talking 3 00:00:10,050 --> 00:00:11,330 about mostly the dorm. 4 00:00:11,460 --> 00:00:16,590 But I wanted to do a video on storage because we're going to be using it in our next project which will 5 00:00:16,590 --> 00:00:19,500 be this actual task list application. 6 00:00:19,590 --> 00:00:26,310 We're going to make it so that we can add tasks we can read them clear them delete them and also persist 7 00:00:26,310 --> 00:00:32,030 them to local storage so that when we leave the application and come back the tasks are still there. 8 00:00:32,040 --> 00:00:32,310 All right. 9 00:00:32,310 --> 00:00:39,420 Now I've minimized the UI here just to be just a single input and a button just because I want to show 10 00:00:39,420 --> 00:00:43,680 you how to submit something and have it get saved to local storage. 11 00:00:43,680 --> 00:00:48,390 But we're going to mostly be working just right in javascript just so I can show you how to use the 12 00:00:48,390 --> 00:00:50,080 local storage API. 13 00:00:50,400 --> 00:00:50,690 All right. 14 00:00:50,700 --> 00:00:52,460 Which is actually part of the browser. 15 00:00:52,470 --> 00:01:00,660 If I were to look at the window object here you can see if we go down right here we have our local storage 16 00:01:00,660 --> 00:01:07,980 API with a bunch of methods such as get item set item remove item very it's very it's very simple to 17 00:01:07,980 --> 00:01:08,940 understand really. 18 00:01:08,940 --> 00:01:16,140 I mean you can set key value pairs and it's important to know that what you said is a value has to be 19 00:01:16,140 --> 00:01:17,320 a string. 20 00:01:17,340 --> 00:01:24,540 Now you can still save arrays and objects and stuff you just have to you have to turn them into a string 21 00:01:24,540 --> 00:01:30,720 first using a method called Jason dot string of phi and then when you pull it out to use it you want 22 00:01:30,720 --> 00:01:35,300 to parse it back using a method called Jason parse. 23 00:01:35,510 --> 00:01:37,580 OK so I'm going to show you how to do all that. 24 00:01:37,590 --> 00:01:46,760 But first of all let's look at how to just set a local storage item. 25 00:01:46,770 --> 00:01:53,310 And the difference between local storage and session storage is that local storage will stay until you 26 00:01:53,310 --> 00:01:59,430 manually clear it out in your settings or through your program and session storage will leave. 27 00:01:59,430 --> 00:02:01,890 It'll go away once your browser is closed. 28 00:02:01,890 --> 00:02:07,530 OK once the session ends but other than that the API is the exact same. 29 00:02:07,560 --> 00:02:17,940 So let's say we want to store local storage towards that item and we want to store a key name and a 30 00:02:17,940 --> 00:02:21,060 value of John. 31 00:02:21,540 --> 00:02:21,780 All right. 32 00:02:21,780 --> 00:02:28,350 So if I go ahead and save that and let it run and then I go over here and we can go and check in our 33 00:02:28,710 --> 00:02:33,930 in our dev tools if we go to application and you go down to where it says storage. 34 00:02:33,930 --> 00:02:40,440 OK there's a few ways to store data in your browser under local storage will click our local host and 35 00:02:40,440 --> 00:02:44,700 you can see that we have the name key in the value of John. 36 00:02:44,700 --> 00:02:45,960 So it's as easy as that. 37 00:02:45,960 --> 00:02:48,980 That one line to set data in your browser. 38 00:02:49,200 --> 00:02:52,200 All right now you can see we also have session storage. 39 00:02:52,200 --> 00:02:54,820 This is from something else just ignore that. 40 00:02:55,110 --> 00:03:01,960 But what we're going to do now is set something in session storage which is the exact same I'm just 41 00:03:02,130 --> 00:03:07,150 going to I'm just going to copy that 42 00:03:10,050 --> 00:03:17,980 and we'll say set session storage item and state of local We just want session. 43 00:03:18,270 --> 00:03:22,670 And let's set name to that. 44 00:03:22,680 --> 00:03:23,060 All right. 45 00:03:23,070 --> 00:03:25,170 Now go ahead and save that in now. 46 00:03:25,170 --> 00:03:27,890 Down here you can see we have name Beth. 47 00:03:28,110 --> 00:03:32,720 Now to prove to you that session storage won't stay. 48 00:03:32,760 --> 00:03:35,670 Once we close the browser I'm going to just comment. 49 00:03:35,670 --> 00:03:43,870 Both of these out and then close up the browser and then I'm going to just open it again see open with 50 00:03:43,870 --> 00:03:53,650 live server and let's open up our dev tools and if we look under local storage you'll see named John 51 00:03:53,660 --> 00:03:57,900 if we look under Section storage that name Beth is gone. 52 00:03:57,920 --> 00:04:01,190 OK so that cleared out because we end the session so. 53 00:04:01,190 --> 00:04:03,550 So that's the big difference between the two. 54 00:04:03,560 --> 00:04:08,190 Other than that these methods here set item get item These are all the same. 55 00:04:08,210 --> 00:04:10,410 So if you know one you know the other. 56 00:04:10,760 --> 00:04:15,210 So we'll we'll be working with local storage mostly. 57 00:04:15,280 --> 00:04:21,590 Now if we want to remove this and by the way you can remove it using your browser if we go click x that 58 00:04:21,590 --> 00:04:36,500 will remove it but we can also say remove from storage we can say local storage Daut remove item 59 00:04:39,050 --> 00:04:40,160 name. 60 00:04:40,160 --> 00:04:40,430 All right. 61 00:04:40,430 --> 00:04:43,500 So go ahead and run that and I can see that it's gone. 62 00:04:43,540 --> 00:04:44,200 All right. 63 00:04:44,210 --> 00:04:58,330 Now to get the value I'm going to just uncomment this again to set it and then once they gets for storage 64 00:04:58,390 --> 00:05:01,200 heard from twice here. 65 00:05:02,060 --> 00:05:06,440 So to get from storage risk we can say we can actually put it in a variable if we want. 66 00:05:06,440 --> 00:05:11,450 So if we say name equals local storage or get item 67 00:05:14,550 --> 00:05:23,250 name and then we'll go ahead and console Daut log name and we'll save and go to a console and you can 68 00:05:23,250 --> 00:05:24,700 see we get John. 69 00:05:24,750 --> 00:05:26,650 All right so very very easy. 70 00:05:26,670 --> 00:05:32,400 Now if you want to clear everything it's actually we'll set another value here. 71 00:05:32,670 --> 00:05:35,950 Well same name same age. 72 00:05:36,900 --> 00:05:40,990 So that is 30 or 30 as a string. 73 00:05:41,130 --> 00:05:43,910 And if we save that and we say console log 74 00:05:46,830 --> 00:05:56,270 action will go ahead and just put in here age and set that to get item age and all console log name 75 00:05:56,300 --> 00:05:57,720 and age. 76 00:05:58,100 --> 00:06:06,440 OK so we have those two values now to clear. 77 00:06:06,840 --> 00:06:13,190 You can do local storage Daut clear. 78 00:06:13,230 --> 00:06:18,720 So if we go ahead and save that it's why is it not working. 79 00:06:23,070 --> 00:06:24,780 See where 80 00:06:29,510 --> 00:06:32,030 it's because some resetting them every time. 81 00:06:32,030 --> 00:06:33,790 So I just kind of get rid of this. 82 00:06:33,980 --> 00:06:37,060 So let's save and now I can see that they're both now. 83 00:06:37,400 --> 00:06:37,760 All right. 84 00:06:37,760 --> 00:06:39,580 When you clear it is going to turn the value. 85 00:06:39,630 --> 00:06:50,040 Now now if I wanted this form to add a task to local storage I'm just going to comment all of this so 86 00:06:50,470 --> 00:07:01,440 what we could do is add a submit event here so we say document Daut get element by the actual do query 87 00:07:01,440 --> 00:07:02,150 selector 88 00:07:05,530 --> 00:07:07,500 I will just say form 89 00:07:10,540 --> 00:07:23,400 thoughts submit I'm sorry and I thought submit an event listener and then submit and then let's do function 90 00:07:25,090 --> 00:07:30,900 pass our event parameter in there and then just stop the default behavior. 91 00:07:35,790 --> 00:07:36,310 OK. 92 00:07:36,370 --> 00:07:37,440 So just test. 93 00:07:37,450 --> 00:07:44,410 So by console dog log one two three and save and add one to three. 94 00:07:44,410 --> 00:07:51,520 All right so we'll create a variable called task and we'll set that equal to document Daut get element 95 00:07:51,520 --> 00:07:59,570 by the task which is the input and we want to get the value. 96 00:08:01,900 --> 00:08:03,890 And then let's just test that out 97 00:08:06,700 --> 00:08:13,100 by saying task and say we put something in here and add and we can get that value. 98 00:08:13,100 --> 00:08:13,440 All right. 99 00:08:13,450 --> 00:08:19,030 Now to set that to local storage very simple you can just do what we did up here. 100 00:08:21,940 --> 00:08:31,840 You say set item this time will set it to task and we'll set it to the task variable and then let's 101 00:08:31,840 --> 00:08:40,560 just do an alert and we'll say task saved. 102 00:08:41,440 --> 00:08:50,650 So now if we say walk the dog and add tasks saved let's go look in application and now you can see task 103 00:08:50,650 --> 00:08:52,150 walk the dog. 104 00:08:52,250 --> 00:08:53,810 All right. 105 00:08:54,310 --> 00:08:59,470 Now the problem with this is if I were to add another task like I would say 106 00:09:02,050 --> 00:09:06,940 pick up kids from school and add you'll see that that gets replaced. 107 00:09:06,940 --> 00:09:11,800 Walk the dog now gets replaced so we can only store one task at a time. 108 00:09:11,860 --> 00:09:18,800 So to fix this what we can do is create an array of tasks and store that as a string. 109 00:09:19,030 --> 00:09:25,900 So what we can do is go down here and let's see we're going to say 110 00:09:29,150 --> 00:09:37,590 let tasks that initialize the tasks variable and we want to first pull out of local storage whatever's 111 00:09:37,590 --> 00:09:42,250 in there or check to see if there's something in there if there is pull it out and add to it. 112 00:09:42,360 --> 00:09:45,870 If not just set tasks to an empty array and add to it. 113 00:09:45,870 --> 00:09:58,970 So let's do an if statement here and we're going to say if local storage Daut get item and since this 114 00:09:58,980 --> 00:10:04,000 is going to be an array of tasks I'm going to call this tasks plural. 115 00:10:04,500 --> 00:10:11,790 All right so say if local storage does get item tasks is equal to now that means there's nothing in 116 00:10:11,790 --> 00:10:16,800 there for tasks so we're going to to set tasks to an empty array. 117 00:10:16,800 --> 00:10:17,270 All right. 118 00:10:17,300 --> 00:10:25,520 Else if there is something in there then we want to set that local variable tasks equal to whatever's 119 00:10:25,590 --> 00:10:28,920 in there so we can a local storage store get item 120 00:10:31,620 --> 00:10:33,000 tasks. 121 00:10:33,000 --> 00:10:37,270 Now the issue here is this is going to be a string. 122 00:10:37,320 --> 00:10:44,820 So what we need to do is parse this into Jason or parses it to an object that we can use. 123 00:10:45,510 --> 00:10:50,790 Well in this case it's actually not going to be an object because it's just storing one value an array 124 00:10:50,790 --> 00:10:51,370 of strings. 125 00:10:51,390 --> 00:10:55,490 But usually you'll store an array of Jason objects. 126 00:10:55,600 --> 00:10:59,710 All right but we still want to use the Jasen dog parse. 127 00:11:00,190 --> 00:11:03,780 OK we still want to wrap it in that. 128 00:11:05,250 --> 00:11:05,680 OK. 129 00:11:05,700 --> 00:11:15,270 Now what we can do is push the task that's coming through the form on to this variable here. 130 00:11:15,330 --> 00:11:23,760 So we're going to go down here and say tasks Daut push and then passed in our task that will add to 131 00:11:23,760 --> 00:11:24,210 it. 132 00:11:24,210 --> 00:11:29,700 Now that's not going to change anything in local storage yet we now need to reset the local storage 133 00:11:29,700 --> 00:11:32,280 tasks with this added value. 134 00:11:32,310 --> 00:11:34,580 So we're going to do our set item here. 135 00:11:34,650 --> 00:11:41,960 We're going to set tasks to the tasks variable which now includes the new the new one we added. 136 00:11:42,450 --> 00:11:49,980 But remember like I said it has to store strings so we need to wrap this task in Jason Daut string ify 137 00:11:52,850 --> 00:11:54,760 like that. 138 00:11:54,830 --> 00:11:55,250 All right. 139 00:11:55,250 --> 00:12:00,350 And that should set it as inside of an array which is formatted as a string. 140 00:12:00,350 --> 00:12:04,340 So let's go ahead and save this and see what happens. 141 00:12:04,340 --> 00:12:07,110 I'm going to clear this single task we have right here. 142 00:12:07,400 --> 00:12:14,030 And let's go ahead and walk the dog in the ad. 143 00:12:14,170 --> 00:12:18,360 Now if we make this a little bigger here you can see that there is an array. 144 00:12:18,500 --> 00:12:24,020 It's actually a string but it's formatted as an array with the value walk the dog. 145 00:12:24,020 --> 00:12:32,270 Now if I were to add something else here or say pick up kids from school and add now you can see that 146 00:12:32,270 --> 00:12:34,550 that has been added to tasks. 147 00:12:34,550 --> 00:12:34,850 All right. 148 00:12:34,850 --> 00:12:39,420 So we basically now have this array in here. 149 00:12:40,250 --> 00:12:47,540 If we were to now try and pull this show up like let's go outside of this whole event right here and 150 00:12:47,600 --> 00:13:03,080 let's say conc tasks equals local storage Daut can get item tasks and then let's try to let's try to 151 00:13:03,080 --> 00:13:04,220 do a foreach 152 00:13:07,100 --> 00:13:09,410 so will say for each function 153 00:13:12,710 --> 00:13:18,310 you will pass and their task and let's just do a console dot log 154 00:13:20,770 --> 00:13:29,800 task let's see what that does so will save will go to our console and we get task is not defined so 155 00:13:30,040 --> 00:13:34,870 task is defined but we can't call for each on it. 156 00:13:34,900 --> 00:13:36,450 So we're getting this error. 157 00:13:36,460 --> 00:13:44,810 So what we can do is we can parse this by saying Jason Daut parse wrapping this value here. 158 00:13:47,190 --> 00:13:48,540 So now it's save 159 00:13:51,650 --> 00:13:56,880 local storage at client's tasks. 160 00:13:56,910 --> 00:13:57,890 See 161 00:14:03,950 --> 00:14:04,530 oh you know what. 162 00:14:04,530 --> 00:14:06,100 I've got my Smike quotes. 163 00:14:06,100 --> 00:14:13,840 I me go back for a minute without the Jason Par's if you got quotes in here it was looking at that as 164 00:14:13,840 --> 00:14:14,820 a variable. 165 00:14:14,830 --> 00:14:15,150 OK. 166 00:14:15,160 --> 00:14:20,890 So now we get the correct error which is for each is not a function because this is an array that we're 167 00:14:20,890 --> 00:14:25,620 calling for each on we pulled it out of local storage with which only store strings. 168 00:14:25,630 --> 00:14:28,730 So now we'll wrap this in Jason dog parse 169 00:14:32,500 --> 00:14:35,590 and now it's save and you can see we can loop through it. 170 00:14:35,680 --> 00:14:38,700 OK so it's now an array. 171 00:14:39,100 --> 00:14:41,590 So we're going to go ahead and stop here now. 172 00:14:41,920 --> 00:14:45,250 We're going to be working with local storage quite a bit throughout the course. 173 00:14:45,250 --> 00:14:51,550 In fact in the next project where we actually build this task list we'll be doing the same kind of thing. 174 00:14:51,700 --> 00:14:57,160 We'll also be pulling it from local storage and inserting each task into the DOM. 175 00:14:57,370 --> 00:15:04,750 We'll be able to delete tasks and have that persist and remove those from local storage as well as the 176 00:15:04,750 --> 00:15:09,130 clear items where we can just clear them all from local storage with a button. 177 00:15:09,130 --> 00:15:09,430 All right. 178 00:15:09,430 --> 00:15:10,360 So that's it guys. 179 00:15:10,360 --> 00:15:14,120 I will see you in the next section where we start on our projects.