1 00:00:01,610 --> 00:00:04,420 Let's now use the local storage API 2 00:00:04,420 --> 00:00:06,500 in order to make the workout data 3 00:00:06,500 --> 00:00:09,453 persist across multiple page reloads. 4 00:00:11,440 --> 00:00:14,860 And let's start with a look at our flowchart 5 00:00:14,860 --> 00:00:18,093 so that we can see exactly what we have to implement. 6 00:00:19,092 --> 00:00:21,540 So basically the idea is that 7 00:00:21,540 --> 00:00:24,120 whenever a new workout is added, 8 00:00:24,120 --> 00:00:28,060 then all the workouts will be added to local storage. 9 00:00:28,060 --> 00:00:31,860 And so local storage is basically a place in the browser, 10 00:00:31,860 --> 00:00:34,740 where we can store data that will stay there 11 00:00:34,740 --> 00:00:37,120 even after we close the page. 12 00:00:37,120 --> 00:00:41,270 So basically the data is basically linked to the URL 13 00:00:41,270 --> 00:00:44,420 on which we are using the application. 14 00:00:44,420 --> 00:00:47,520 So, again whenever there is a new workout, 15 00:00:47,520 --> 00:00:50,170 we will take the entire workouts array 16 00:00:50,170 --> 00:00:52,540 and store it in local storage. 17 00:00:52,540 --> 00:00:54,950 And then whenever the page loads, 18 00:00:54,950 --> 00:00:56,790 so up here in this event, 19 00:00:56,790 --> 00:01:00,460 then we will load all the workouts from the local storage, 20 00:01:00,460 --> 00:01:04,270 and render them on the map and also on the list. 21 00:01:04,270 --> 00:01:08,760 So just like we do it when a user submits a new workout. 22 00:01:08,760 --> 00:01:11,410 And so like this, when you reload the page, 23 00:01:11,410 --> 00:01:12,480 it will then appear 24 00:01:12,480 --> 00:01:15,240 as if all the workouts you had previously 25 00:01:15,240 --> 00:01:17,690 are still in the same place. 26 00:01:17,690 --> 00:01:20,160 And hopefully this makes sense, 27 00:01:20,160 --> 00:01:22,370 and so let's now get started, 28 00:01:22,370 --> 00:01:25,590 and we will start with this part here. 29 00:01:25,590 --> 00:01:28,800 So storing all the workouts in local storage, 30 00:01:28,800 --> 00:01:30,370 and remember that happens 31 00:01:30,370 --> 00:01:33,700 whenever the user creates a new workout. 32 00:01:33,700 --> 00:01:38,700 And so we have to get started in the new workout method. 33 00:01:40,350 --> 00:01:43,783 So down here, we need to add yet another point. 34 00:01:46,150 --> 00:01:51,150 So set local storage to all workouts. 35 00:01:53,670 --> 00:01:56,850 And here I'm actually gonna create yet another method, 36 00:01:56,850 --> 00:01:59,123 so that we can keep this method here, 37 00:02:00,160 --> 00:02:02,050 basically nice and clean. 38 00:02:02,050 --> 00:02:05,200 So as you see, this new workout method here 39 00:02:05,200 --> 00:02:09,720 is basically a bit of a method that does delegation. 40 00:02:09,720 --> 00:02:12,140 So we do some stuff here, of course, 41 00:02:12,140 --> 00:02:15,143 but then once we're done creating the actual object, 42 00:02:16,080 --> 00:02:19,650 then down here, we delegate all kinds of functionality 43 00:02:19,650 --> 00:02:22,323 to other methods like these ones. 44 00:02:23,500 --> 00:02:26,447 And now I'll also create setLocalStorage. 45 00:02:30,045 --> 00:02:32,350 So here I'm of course calling it already, 46 00:02:32,350 --> 00:02:34,803 but now I will create it afterwards. 47 00:02:36,050 --> 00:02:39,060 So setLocalStorage and once again, 48 00:02:39,060 --> 00:02:40,543 let's add it here at the end. 49 00:02:43,350 --> 00:02:45,700 And this one doesn't need any parameters 50 00:02:45,700 --> 00:02:48,210 because we will simply get the workouts 51 00:02:48,210 --> 00:02:51,070 from the workout property. 52 00:02:51,070 --> 00:02:55,050 And so this is how we use the local storage API. 53 00:02:55,050 --> 00:02:58,940 And I say API because local storage is, once again, 54 00:02:58,940 --> 00:03:01,630 an API that the browser provides for us 55 00:03:01,630 --> 00:03:03,660 and that we can use. 56 00:03:03,660 --> 00:03:07,690 So localStorage.setItem, 57 00:03:07,690 --> 00:03:12,690 and then we have to give it a name, so workouts, 58 00:03:12,987 --> 00:03:14,880 and then the second argument 59 00:03:14,880 --> 00:03:17,220 needs to be a string that we want to store 60 00:03:17,220 --> 00:03:20,730 and which will be associated with this key here. 61 00:03:20,730 --> 00:03:25,120 So basically local storage is a simple key value store, 62 00:03:25,120 --> 00:03:27,590 and so we need a key which is this one here, 63 00:03:27,590 --> 00:03:29,200 and we need a simple value, 64 00:03:29,200 --> 00:03:31,590 which must also be a string. 65 00:03:31,590 --> 00:03:34,400 But we can convert an object to a string 66 00:03:34,400 --> 00:03:36,270 by doing this. 67 00:03:36,270 --> 00:03:40,400 So JSON.stringify. 68 00:03:40,400 --> 00:03:43,670 So this is another new one, all right. 69 00:03:43,670 --> 00:03:45,700 But we can use this method here 70 00:03:45,700 --> 00:03:50,510 to convert any object in JavaScript to a string. 71 00:03:50,510 --> 00:03:52,070 And so what we want to convert 72 00:03:52,070 --> 00:03:57,070 is this.workouts, like this. 73 00:03:58,530 --> 00:04:00,600 And that's actually it already. 74 00:04:00,600 --> 00:04:04,930 With this, we are setting all the workouts to local storage. 75 00:04:04,930 --> 00:04:07,870 Now, I just want to mention that local storage 76 00:04:07,870 --> 00:04:10,120 is a very simple API. 77 00:04:10,120 --> 00:04:12,540 And so it is only advised to use 78 00:04:12,540 --> 00:04:15,830 for small amounts of data, all right. 79 00:04:15,830 --> 00:04:19,420 That's because local storage is blocking, 80 00:04:19,420 --> 00:04:23,050 and for now you don't know what blocking actually means 81 00:04:23,050 --> 00:04:25,550 but it is something that's very bad, 82 00:04:25,550 --> 00:04:27,330 and we will learn why that is 83 00:04:27,330 --> 00:04:29,290 actually in the next section. 84 00:04:29,290 --> 00:04:31,600 But for now, what matters here is 85 00:04:31,600 --> 00:04:33,780 that you shouldn't use local storage 86 00:04:33,780 --> 00:04:35,980 to store large amounts of data, 87 00:04:35,980 --> 00:04:39,453 because that will surely slow down your application. 88 00:04:40,700 --> 00:04:43,590 But anyway, let's already test this out, 89 00:04:43,590 --> 00:04:45,370 because we actually have a way 90 00:04:45,370 --> 00:04:47,293 of seeing this data in the browser. 91 00:04:50,510 --> 00:04:52,393 So let's add something here. 92 00:04:54,700 --> 00:04:56,160 Okay. 93 00:04:56,160 --> 00:04:58,580 So everything worked fine. 94 00:04:58,580 --> 00:05:01,560 So now let's go here to this application tab, 95 00:05:01,560 --> 00:05:03,310 and then here on the left side 96 00:05:03,310 --> 00:05:08,220 you have this local storage tab, all right. 97 00:05:08,220 --> 00:05:10,963 And if we click this arrow here, and then here, 98 00:05:13,090 --> 00:05:16,390 well, then actually it should be here already. 99 00:05:16,390 --> 00:05:20,410 Well, let's see if we have everything correctly set up. 100 00:05:20,410 --> 00:05:23,910 So we have setLocalStorage, then setItem 101 00:05:23,910 --> 00:05:27,330 and here everything looks correct. 102 00:05:27,330 --> 00:05:30,373 And here, I believe we're also correctly calling it, 103 00:05:32,504 --> 00:05:34,400 setLocalStorage. 104 00:05:34,400 --> 00:05:35,680 So this should work. 105 00:05:35,680 --> 00:05:37,623 So let's simply try it again here. 106 00:05:39,547 --> 00:05:40,834 (clicking) 107 00:05:40,834 --> 00:05:42,830 (typing) Okay. 108 00:05:42,830 --> 00:05:46,410 Ah, and now you saw it appearing here, right. 109 00:05:46,410 --> 00:05:49,770 So we have the key of workout and then the value. 110 00:05:49,770 --> 00:05:53,133 And the value is basically now this string here. 111 00:05:54,030 --> 00:05:56,970 So, actually here it looks like an object, 112 00:05:56,970 --> 00:05:58,710 because apparently JavaScript 113 00:05:58,710 --> 00:06:01,360 somehow then converts it back to an object, 114 00:06:01,360 --> 00:06:04,210 but actually it is stored as a string, 115 00:06:04,210 --> 00:06:05,973 here in this workouts key. 116 00:06:07,400 --> 00:06:09,853 So you see that we have this single workout 117 00:06:09,853 --> 00:06:11,410 that we currently have, 118 00:06:11,410 --> 00:06:13,383 but of course, if we add another one, 119 00:06:16,030 --> 00:06:19,590 then now we got this bigger string here. 120 00:06:19,590 --> 00:06:23,220 And so it now contains these two objects. 121 00:06:23,220 --> 00:06:26,460 And so like this, the local storage 122 00:06:26,460 --> 00:06:29,150 always is gonna be updated. 123 00:06:29,150 --> 00:06:32,080 So it's up to date, according to the data 124 00:06:32,080 --> 00:06:33,853 that we have in our application. 125 00:06:34,720 --> 00:06:35,600 Great. 126 00:06:35,600 --> 00:06:37,060 And now all we have to do 127 00:06:37,060 --> 00:06:39,650 is to then actually show the data back here 128 00:06:39,650 --> 00:06:42,863 on the list and the map once we reload the page. 129 00:06:43,720 --> 00:06:45,660 So let me actually show that to you 130 00:06:45,660 --> 00:06:48,030 because here in the application, 131 00:06:48,030 --> 00:06:50,883 as you see the local storage is still there. 132 00:06:51,940 --> 00:06:55,390 And so now we will make use of this 133 00:06:55,390 --> 00:06:59,083 by then displaying that data back in our application. 134 00:07:00,670 --> 00:07:03,053 So remember when we want to do that, 135 00:07:03,950 --> 00:07:07,620 it is right here in the constructor, right. 136 00:07:07,620 --> 00:07:09,840 Because this is where we have all the code 137 00:07:09,840 --> 00:07:13,123 that is executed right when the application loads. 138 00:07:14,530 --> 00:07:16,003 So let's add that here. 139 00:07:17,120 --> 00:07:19,609 And I'm gonna start with some comments here. 140 00:07:19,609 --> 00:07:21,590 (typing) 141 00:07:21,590 --> 00:07:22,423 Handlers, 142 00:07:23,330 --> 00:07:28,330 then get user's position, 143 00:07:30,010 --> 00:07:34,810 and then get data from local storage. 144 00:07:36,710 --> 00:07:37,543 And so again, 145 00:07:37,543 --> 00:07:42,350 I will now call a method that I'm going to create later. 146 00:07:42,350 --> 00:07:44,117 So getLocalStorage. 147 00:07:48,170 --> 00:07:51,690 And so let's now go ahead and create this method 148 00:07:51,690 --> 00:07:52,873 down here in the end. 149 00:07:55,115 --> 00:07:59,710 (clicking) (typing) 150 00:07:59,710 --> 00:08:02,410 And so now, here we do the opposite. 151 00:08:02,410 --> 00:08:04,863 So localStorage.getItem. 152 00:08:06,730 --> 00:08:09,633 And now we simply have to pass in the key. 153 00:08:10,720 --> 00:08:14,960 So basically the identifier of our local storage item, 154 00:08:14,960 --> 00:08:17,500 because we could set multiple items. 155 00:08:17,500 --> 00:08:20,670 So we could set everything all for application. 156 00:08:20,670 --> 00:08:22,360 So for example, if we wanted, 157 00:08:22,360 --> 00:08:25,000 we could store everything that's in the application 158 00:08:25,000 --> 00:08:26,680 in local storage. 159 00:08:26,680 --> 00:08:30,350 We would just have to define one key for each of them, 160 00:08:30,350 --> 00:08:32,430 and then we could use that key 161 00:08:32,430 --> 00:08:34,433 to basically retrieve it back. 162 00:08:35,326 --> 00:08:38,840 (clicking) (typing) 163 00:08:38,840 --> 00:08:41,563 Alright, so let's now store this data. 164 00:08:42,550 --> 00:08:45,683 And so here, we can then see it for the first time. 165 00:08:46,730 --> 00:08:48,350 So now as the page loads, 166 00:08:48,350 --> 00:08:51,000 it should display this data to us 167 00:08:51,000 --> 00:08:51,993 in the console. 168 00:08:54,800 --> 00:08:58,573 And, well, it's nowhere to be found. 169 00:09:00,100 --> 00:09:01,833 Let's reload here maybe again. 170 00:09:03,540 --> 00:09:05,700 So something must be wrong, now, 171 00:09:05,700 --> 00:09:07,153 and it's called workouts. 172 00:09:09,350 --> 00:09:13,240 And here you go, all right. 173 00:09:13,240 --> 00:09:17,000 So you see that indeed, it is this big string. 174 00:09:17,000 --> 00:09:19,440 And so now we want to convert this string 175 00:09:19,440 --> 00:09:21,690 back to the objects. 176 00:09:21,690 --> 00:09:24,310 And so, basically we need to use the opposite 177 00:09:24,310 --> 00:09:28,513 of JSON.stringify which is JSON.parse. 178 00:09:33,070 --> 00:09:35,610 So let's try that again. 179 00:09:35,610 --> 00:09:38,100 And now indeed we get an array 180 00:09:38,100 --> 00:09:42,580 with some real objects in there, all right. 181 00:09:42,580 --> 00:09:44,830 Now there's still a problem with this, 182 00:09:44,830 --> 00:09:47,480 but more about that a little bit later, 183 00:09:47,480 --> 00:09:49,180 because all the relevant data 184 00:09:49,180 --> 00:09:51,833 that we need for now is actually in there. 185 00:09:53,230 --> 00:09:56,330 So now let's do something with that data. 186 00:09:56,330 --> 00:09:58,570 And the first thing that we should actually do 187 00:09:58,570 --> 00:10:02,440 is to check if there is actually some data. 188 00:10:02,440 --> 00:10:04,820 So when there is nothing in local storage, 189 00:10:04,820 --> 00:10:09,230 then of course the data will be, like undefined. 190 00:10:09,230 --> 00:10:11,903 So in that case, we don't want to do anything. 191 00:10:12,960 --> 00:10:16,760 So let's use another guard clause here and say, 192 00:10:16,760 --> 00:10:19,493 if there is no data then simply return. 193 00:10:21,190 --> 00:10:24,020 But anyway, let's keep going. 194 00:10:24,020 --> 00:10:26,990 And so what we want to do with this data, 195 00:10:26,990 --> 00:10:29,900 which is basically our array of workouts, 196 00:10:29,900 --> 00:10:33,160 is to restore our workouts array. 197 00:10:33,160 --> 00:10:38,140 So we can say, this.workouts 198 00:10:38,140 --> 00:10:41,223 should be equal to the data that we just read. 199 00:10:42,630 --> 00:10:45,030 So, keep in mind that this method here 200 00:10:45,030 --> 00:10:48,600 is gonna be executed right in the very beginning. 201 00:10:48,600 --> 00:10:50,600 And so at that point, 202 00:10:50,600 --> 00:10:53,520 the workouts array is always gonna be empty. 203 00:10:53,520 --> 00:10:56,800 But if we already had some data in the local storage, 204 00:10:56,800 --> 00:11:00,060 then, we will simply set that workouts array 205 00:11:00,060 --> 00:11:02,780 to the data that we had before. 206 00:11:02,780 --> 00:11:05,680 And so essentially we are restoring the data here 207 00:11:05,680 --> 00:11:09,330 across multiple reloads of the page. 208 00:11:09,330 --> 00:11:12,650 Okay, and so now let's take all these workouts 209 00:11:12,650 --> 00:11:14,503 and render them in the list. 210 00:11:16,500 --> 00:11:19,053 So this.workouts, 211 00:11:20,300 --> 00:11:21,810 and so we want to do something 212 00:11:21,810 --> 00:11:23,453 for each of the workouts. 213 00:11:24,860 --> 00:11:27,110 And so we loop over this array, 214 00:11:27,110 --> 00:11:29,100 but we don't want to create a new array. 215 00:11:29,100 --> 00:11:31,543 And so forEach is perfect for this. 216 00:11:32,796 --> 00:11:35,933 Then now, I'm gonna call each of them work. 217 00:11:37,620 --> 00:11:40,847 And so, now I can do this.renderWorkout 218 00:11:43,190 --> 00:11:44,623 the current workout. 219 00:11:45,930 --> 00:11:49,150 And so now it becomes really, really helpful 220 00:11:49,150 --> 00:11:50,540 that we have all the logic 221 00:11:50,540 --> 00:11:54,020 of rendering a workout in the sidebar 222 00:11:54,020 --> 00:11:58,090 here nicely inside of this method, right. 223 00:11:58,090 --> 00:12:01,550 Because, imagine that we had all this code here, 224 00:12:01,550 --> 00:12:05,683 inside of this method here, 225 00:12:06,630 --> 00:12:11,170 so the new workout method, right. 226 00:12:11,170 --> 00:12:13,370 So if we did all of that here, 227 00:12:13,370 --> 00:12:15,840 then now we would have to copy that code 228 00:12:15,840 --> 00:12:17,970 or we would have to refactor it. 229 00:12:17,970 --> 00:12:21,140 But instead, you can start to get into the habit 230 00:12:21,140 --> 00:12:24,630 of exporting functionality into its own methods 231 00:12:24,630 --> 00:12:26,180 or its own functions. 232 00:12:26,180 --> 00:12:29,210 And so then it is very easy to reuse them, 233 00:12:29,210 --> 00:12:32,110 such as we are doing now with renderWorkout. 234 00:12:33,970 --> 00:12:34,803 Right. 235 00:12:34,803 --> 00:12:37,210 So here, all we do is to call renderWorkout 236 00:12:38,830 --> 00:12:41,320 that we already had written before. 237 00:12:41,320 --> 00:12:42,930 So let's now test this, 238 00:12:42,930 --> 00:12:44,170 and right now, 239 00:12:44,170 --> 00:12:47,920 we should already get the two workouts there, 240 00:12:47,920 --> 00:12:50,870 and indeed, here they are. 241 00:12:50,870 --> 00:12:54,550 So these are the two ones that we had created previously. 242 00:12:54,550 --> 00:12:58,683 And so we see that it did indeed now persist across loads. 243 00:12:59,620 --> 00:13:03,130 Now, we also need to add them here on the map. 244 00:13:03,130 --> 00:13:03,963 And so for that, 245 00:13:03,963 --> 00:13:07,483 we are going to use our renderWorkout marker method 246 00:13:07,483 --> 00:13:09,223 that we also already have. 247 00:13:10,435 --> 00:13:13,283 And let's start by actually putting it here, 248 00:13:14,670 --> 00:13:16,400 just so I can show you 249 00:13:16,400 --> 00:13:18,703 that it's actually not gonna work. 250 00:13:19,550 --> 00:13:22,330 But then it becomes easier to explain 251 00:13:22,330 --> 00:13:23,663 why it doesn't work. 252 00:13:24,660 --> 00:13:25,593 So let's see. 253 00:13:27,290 --> 00:13:28,807 And so here we get, 254 00:13:28,807 --> 00:13:32,970 "Cannot read property 'addlayer' of undefined." 255 00:13:32,970 --> 00:13:34,600 So indeed, we get an error 256 00:13:34,600 --> 00:13:37,350 when we try to add this first workout 257 00:13:37,350 --> 00:13:38,423 also to the map. 258 00:13:39,370 --> 00:13:42,360 So let's go back and think why that is. 259 00:13:42,360 --> 00:13:45,260 Well, once again, remember that this method here 260 00:13:45,260 --> 00:13:47,980 is executed right at the beginning, 261 00:13:47,980 --> 00:13:50,070 so right after the page loaded. 262 00:13:50,070 --> 00:13:53,340 And so we are trying to add this marker to the map 263 00:13:53,340 --> 00:13:55,160 right at the beginning. 264 00:13:55,160 --> 00:13:56,950 However, at this point, 265 00:13:56,950 --> 00:14:00,020 the map has actually not yet been loaded. 266 00:14:00,020 --> 00:14:01,130 And so essentially, 267 00:14:01,130 --> 00:14:04,730 we are trying to add a marker, 268 00:14:04,730 --> 00:14:07,423 let's say where that is. 269 00:14:09,230 --> 00:14:12,520 So we are trying to add this marker to the map, 270 00:14:12,520 --> 00:14:13,890 which is this one here, 271 00:14:13,890 --> 00:14:17,040 which isn't yet defined at this point. 272 00:14:17,040 --> 00:14:20,080 And so once again, this is a first glimpse 273 00:14:20,080 --> 00:14:22,970 into the nature of asynchronous JavaScript, 274 00:14:22,970 --> 00:14:26,140 which we will talk about in the next section. 275 00:14:26,140 --> 00:14:29,730 But what matters here is that you grasp this idea 276 00:14:29,730 --> 00:14:32,370 that the map is not yet created 277 00:14:32,370 --> 00:14:33,670 right at the beginning 278 00:14:33,670 --> 00:14:36,940 when the application is first loaded, right. 279 00:14:36,940 --> 00:14:38,670 It takes some time. 280 00:14:38,670 --> 00:14:41,310 So, first the position of the user 281 00:14:41,310 --> 00:14:46,260 needs to beget using geolocation, 282 00:14:46,260 --> 00:14:47,840 so this one here. 283 00:14:47,840 --> 00:14:48,900 And then after that, 284 00:14:48,900 --> 00:14:51,350 the map has also to be loaded. 285 00:14:51,350 --> 00:14:53,950 So there's a lot of stuff that has to happen 286 00:14:53,950 --> 00:14:58,390 before we can actually render any markers on the map. 287 00:14:58,390 --> 00:15:01,270 So instead of trying to render the markers, 288 00:15:01,270 --> 00:15:03,030 right at the very beginning, 289 00:15:03,030 --> 00:15:04,720 we should only do that 290 00:15:04,720 --> 00:15:06,920 once the map has been loaded. 291 00:15:06,920 --> 00:15:09,600 And so we can put that logic 292 00:15:09,600 --> 00:15:14,020 right here in this method of load map, okay. 293 00:15:14,020 --> 00:15:16,003 So here at the very end, basically. 294 00:15:16,890 --> 00:15:19,023 So let's get the code from down here. 295 00:15:21,100 --> 00:15:23,910 So I will get all of this, 296 00:15:23,910 --> 00:15:27,063 but I will then only keep this part, all right. 297 00:15:28,250 --> 00:15:30,080 So let's copy this. 298 00:15:30,080 --> 00:15:34,030 And so here we will not render the markers, 299 00:15:34,030 --> 00:15:36,863 so only the workout on the sidebar list. 300 00:15:37,700 --> 00:15:39,153 And then it is here. 301 00:15:41,180 --> 00:15:45,680 So, yeah. 302 00:15:45,680 --> 00:15:47,120 Right here in load map, 303 00:15:47,120 --> 00:15:50,910 this is where we will then render the markers, 304 00:15:50,910 --> 00:15:53,100 because at this point, 305 00:15:53,100 --> 00:15:56,020 the map is, of course, already available. 306 00:15:56,020 --> 00:16:00,290 And so with this, it should be working, okay. 307 00:16:00,290 --> 00:16:02,460 But make sure that you really understand 308 00:16:02,460 --> 00:16:05,410 why we have to call this method here 309 00:16:05,410 --> 00:16:07,720 and not right in the beginning. 310 00:16:07,720 --> 00:16:11,940 So, let's see what happens now, 311 00:16:11,940 --> 00:16:15,750 and we didn't get any error and yeah. 312 00:16:15,750 --> 00:16:17,840 So now we have the two markers 313 00:16:17,840 --> 00:16:19,913 right where I had put them previously. 314 00:16:21,150 --> 00:16:24,673 And now let's just add another one right here. 315 00:16:29,680 --> 00:16:30,513 All right. 316 00:16:30,513 --> 00:16:32,163 And now if I reload the page, 317 00:16:34,600 --> 00:16:37,770 then indeed, there is the marker, 318 00:16:37,770 --> 00:16:40,633 and this one and, of course, all the other ones as well. 319 00:16:41,530 --> 00:16:42,660 Beautiful. 320 00:16:42,660 --> 00:16:44,113 So this is great. 321 00:16:45,230 --> 00:16:48,690 And our application is now essentially finished. 322 00:16:48,690 --> 00:16:51,413 I just want to show you one problem that we have now. 323 00:16:52,440 --> 00:16:54,493 And that has to do with local storage. 324 00:16:55,450 --> 00:16:57,780 So, remember that when I click here 325 00:16:57,780 --> 00:16:59,580 on one of these workouts, 326 00:16:59,580 --> 00:17:02,030 it will move the map to the workout, 327 00:17:02,030 --> 00:17:04,030 and so that's gonna be fine, 328 00:17:04,030 --> 00:17:07,530 but what also happens is that this clicks property 329 00:17:07,530 --> 00:17:10,653 is gonna be increased by using the click method 330 00:17:10,653 --> 00:17:14,210 that is inherited from the workout class. 331 00:17:14,210 --> 00:17:17,113 But watch what happens now as I try to do that. 332 00:17:19,340 --> 00:17:23,363 And so we get workout.click is not a function. 333 00:17:24,620 --> 00:17:26,793 So, why do you think that is? 334 00:17:27,780 --> 00:17:30,880 Well, let's try to take a look at the objects 335 00:17:30,880 --> 00:17:33,840 that we get back from local storage. 336 00:17:33,840 --> 00:17:35,253 So that's this one here. 337 00:17:36,170 --> 00:17:37,250 And I know that right now 338 00:17:37,250 --> 00:17:39,850 we have a ton of console.logs here, 339 00:17:39,850 --> 00:17:42,000 so we should get rid of them at some point, 340 00:17:42,870 --> 00:17:45,230 but anyway, for now let's take a look 341 00:17:45,230 --> 00:17:48,540 at the objects that we basically have right now. 342 00:17:48,540 --> 00:17:51,090 And so this is currently also the data 343 00:17:51,090 --> 00:17:54,483 that is in this .workouts, right? 344 00:17:55,380 --> 00:17:57,730 Now, if we take a look at this, 345 00:17:57,730 --> 00:17:59,940 then here everything works okay. 346 00:17:59,940 --> 00:18:03,160 But now if we take a look at the prototype chain, 347 00:18:03,160 --> 00:18:06,540 you see that now it's no longer an object 348 00:18:06,540 --> 00:18:08,230 of the type of running, 349 00:18:08,230 --> 00:18:12,120 and also not of the type of workout, right. 350 00:18:12,120 --> 00:18:15,793 So the entire prototype chain that we had before is gone. 351 00:18:16,840 --> 00:18:20,910 So contrast that to one of these objects. 352 00:18:20,910 --> 00:18:23,510 So again, the data is fine, 353 00:18:23,510 --> 00:18:28,200 but here, we actually have the prototype with calcPace, 354 00:18:28,200 --> 00:18:31,890 and then that has the click entities, 355 00:18:31,890 --> 00:18:36,833 that description methods in the workout prototype, right. 356 00:18:38,290 --> 00:18:41,200 So, the problem here is that basically, 357 00:18:41,200 --> 00:18:44,350 when we converted our objects to a string, 358 00:18:44,350 --> 00:18:47,140 and then back from the string to objects, 359 00:18:47,140 --> 00:18:49,590 we lost the prototype chain. 360 00:18:49,590 --> 00:18:51,453 And so these new objects here 361 00:18:51,453 --> 00:18:54,640 that we recovered from the local storage 362 00:18:54,640 --> 00:18:57,210 are now just regular objects. 363 00:18:57,210 --> 00:18:59,160 They are now no longer objects 364 00:18:59,160 --> 00:19:01,000 that were created by the running 365 00:19:01,000 --> 00:19:03,020 or by the cycling class. 366 00:19:03,020 --> 00:19:04,010 And so therefore, 367 00:19:04,010 --> 00:19:05,990 they will not be able to inherit 368 00:19:05,990 --> 00:19:08,050 any of their methods. 369 00:19:08,050 --> 00:19:09,347 And so in the end, 370 00:19:09,347 --> 00:19:12,320 that's the reason why workout.click 371 00:19:12,320 --> 00:19:14,760 is now not a function anymore. 372 00:19:14,760 --> 00:19:18,470 So, again, because the object now no longer has it 373 00:19:18,470 --> 00:19:19,573 in its prototype. 374 00:19:20,520 --> 00:19:23,300 So you see that this is just the regular methods 375 00:19:23,300 --> 00:19:26,963 that are available on any object, all right. 376 00:19:27,860 --> 00:19:29,680 So this can be a big problem 377 00:19:29,680 --> 00:19:31,730 when you work with local storage 378 00:19:31,730 --> 00:19:33,890 and object oriented programming 379 00:19:33,890 --> 00:19:35,750 like we are doing here. 380 00:19:35,750 --> 00:19:38,340 Now to fix this problem, we could go ahead 381 00:19:38,340 --> 00:19:41,663 and restore the object right here. 382 00:19:43,840 --> 00:19:47,123 So, in our getLocalStorage, 383 00:19:48,090 --> 00:19:51,560 we could now loop over this data here, 384 00:19:51,560 --> 00:19:53,680 and then restore the objects 385 00:19:53,680 --> 00:19:57,030 by creating a new object using the class, 386 00:19:57,030 --> 00:20:01,130 based on the data that is coming here from local storage. 387 00:20:01,130 --> 00:20:02,990 But that's a little bit of work 388 00:20:02,990 --> 00:20:05,350 and so we're not gonna do that here. 389 00:20:05,350 --> 00:20:07,840 And so instead what I will do 390 00:20:07,840 --> 00:20:10,350 is to simply disable the functionality 391 00:20:10,350 --> 00:20:12,400 of counting the clicks. 392 00:20:12,400 --> 00:20:16,560 So remember that when I first introduced this method here, 393 00:20:16,560 --> 00:20:19,270 I told you that one of the reasons for it 394 00:20:19,270 --> 00:20:21,530 is that I also wanted to show you something 395 00:20:21,530 --> 00:20:23,130 in the next lecture. 396 00:20:23,130 --> 00:20:24,720 And so that's exactly here, 397 00:20:24,720 --> 00:20:26,560 what I wanted to show you. 398 00:20:26,560 --> 00:20:30,130 So basically, that objects coming from local storage 399 00:20:30,130 --> 00:20:32,240 will not inherit all the methods 400 00:20:32,240 --> 00:20:33,990 that they did before. 401 00:20:33,990 --> 00:20:35,200 All right. 402 00:20:35,200 --> 00:20:37,850 And so with that, we are basically done. 403 00:20:37,850 --> 00:20:42,273 Let's just get rid of some of these console.logs here, 404 00:20:44,890 --> 00:20:47,400 because it's not really a good practice 405 00:20:47,400 --> 00:20:50,563 to have them in the final code. 406 00:20:52,770 --> 00:20:55,860 So we can have maybe one while we're developing, 407 00:20:55,860 --> 00:20:59,273 but then at some point it simply clutters, 408 00:21:01,330 --> 00:21:03,720 like our entire console workout. 409 00:21:03,720 --> 00:21:05,103 And so that's not helpful. 410 00:21:06,120 --> 00:21:07,393 And here again. 411 00:21:10,740 --> 00:21:11,830 And you see that here 412 00:21:11,830 --> 00:21:14,593 we still have all of these workouts, of course. 413 00:21:15,470 --> 00:21:17,000 Now actually to finish, 414 00:21:17,000 --> 00:21:19,660 I want to create a quick and easy way 415 00:21:19,660 --> 00:21:23,130 to delete all of these workouts at once, 416 00:21:23,130 --> 00:21:25,093 at least from local storage. 417 00:21:26,020 --> 00:21:28,703 And so let's go back here, 418 00:21:30,090 --> 00:21:32,880 and basically add a method 419 00:21:32,880 --> 00:21:36,220 to the public interface of this class 420 00:21:36,220 --> 00:21:37,910 for the first time. 421 00:21:37,910 --> 00:21:39,960 So this class is a little bit unusual, 422 00:21:39,960 --> 00:21:43,100 because right now, we don't have any public method. 423 00:21:43,100 --> 00:21:45,310 So there's no public interface. 424 00:21:45,310 --> 00:21:49,760 But now we will create a reset method here, 425 00:21:49,760 --> 00:21:52,030 which we can then use out here 426 00:21:52,030 --> 00:21:54,130 or even in the console. 427 00:21:54,130 --> 00:21:56,450 And so, actually that's what we will do, 428 00:21:56,450 --> 00:21:58,540 so using it in a console. 429 00:21:58,540 --> 00:22:00,550 So what I want to do in this one here 430 00:22:00,550 --> 00:22:04,500 is to basically remove this workouts item 431 00:22:04,500 --> 00:22:06,560 from local storage. 432 00:22:06,560 --> 00:22:09,970 And so besides setting and getting items, 433 00:22:09,970 --> 00:22:13,773 we can also remove items based on the key. 434 00:22:17,060 --> 00:22:17,893 All right. 435 00:22:17,893 --> 00:22:20,060 And with this we removed our workouts 436 00:22:20,060 --> 00:22:22,070 from the local storage, 437 00:22:22,070 --> 00:22:25,790 and now we can then reload the page programmatically. 438 00:22:25,790 --> 00:22:29,250 And so then the application will look completely empty. 439 00:22:29,250 --> 00:22:33,607 And we can do this with location.reload. 440 00:22:36,280 --> 00:22:40,060 And location is basically a big object 441 00:22:40,060 --> 00:22:41,810 that contains a lot of methods 442 00:22:41,810 --> 00:22:44,180 and properties in the browser. 443 00:22:44,180 --> 00:22:45,570 And so one of the methods 444 00:22:45,570 --> 00:22:48,023 is the ability to reload the page. 445 00:22:49,080 --> 00:22:51,453 So, let's try that now. 446 00:22:52,390 --> 00:22:55,160 And as I said, I will do that in the console. 447 00:22:55,160 --> 00:22:57,240 So let's go actually back to our code 448 00:22:57,240 --> 00:22:59,073 just to see where we can use it. 449 00:23:00,140 --> 00:23:03,300 So, we are creating the app object 450 00:23:03,300 --> 00:23:06,880 and then storing it in app, right. 451 00:23:06,880 --> 00:23:10,220 And so we have access to this variable here, 452 00:23:10,220 --> 00:23:12,300 of course, in the console. 453 00:23:12,300 --> 00:23:14,713 So let's take a look at that actually. 454 00:23:16,800 --> 00:23:18,700 And you'll see that indeed, 455 00:23:18,700 --> 00:23:23,560 here we have these private fields, 456 00:23:23,560 --> 00:23:25,930 and then we have all of these methods here 457 00:23:25,930 --> 00:23:27,790 in the prototype. 458 00:23:27,790 --> 00:23:29,883 And so one of them is of course, reset. 459 00:23:30,740 --> 00:23:34,400 And so let's do that. 460 00:23:34,400 --> 00:23:35,713 So reset. 461 00:23:36,820 --> 00:23:38,713 And yeah, it worked. 462 00:23:39,550 --> 00:23:42,610 So our application is back to being empty now 463 00:23:42,610 --> 00:23:45,670 so that we can add some more realistic data 464 00:23:45,670 --> 00:23:46,883 if we wanted to. 465 00:23:49,024 --> 00:23:50,220 (typing) 466 00:23:50,220 --> 00:23:52,140 For example like this, 467 00:23:52,140 --> 00:23:54,660 or maybe we went cycling right here, 468 00:23:54,660 --> 00:23:56,543 which is a really nice location. 469 00:23:57,970 --> 00:24:01,210 And here, let's say we took two hours 470 00:24:01,210 --> 00:24:05,000 and gained 500 meters, all right. 471 00:24:05,000 --> 00:24:05,833 And now, of course, 472 00:24:05,833 --> 00:24:08,220 everything is back to working here 473 00:24:08,220 --> 00:24:11,630 because we got rid of that click method. 474 00:24:11,630 --> 00:24:14,230 We still have some logins here to the console, 475 00:24:14,230 --> 00:24:17,430 but, never mind, that's not a problem. 476 00:24:17,430 --> 00:24:18,770 All right. 477 00:24:18,770 --> 00:24:20,020 But what matters here 478 00:24:20,020 --> 00:24:23,160 is that our application is now feature complete. 479 00:24:23,160 --> 00:24:26,233 We implemented everything from our flowchart. 480 00:24:28,592 --> 00:24:29,470 Right. 481 00:24:29,470 --> 00:24:31,290 So everything is done here. 482 00:24:31,290 --> 00:24:34,070 And so at this point, the final architecture 483 00:24:34,070 --> 00:24:38,140 of our application looks like this. 484 00:24:38,140 --> 00:24:40,500 So I have all of the methods here 485 00:24:40,500 --> 00:24:43,730 that we implemented in the app class, 486 00:24:43,730 --> 00:24:47,890 and also for workout, running and cycling. 487 00:24:47,890 --> 00:24:50,140 Now, I'm not gonna go over this here now, 488 00:24:50,140 --> 00:24:51,450 but it's a good idea 489 00:24:51,450 --> 00:24:53,500 for you to actually check it out, 490 00:24:53,500 --> 00:24:55,230 to get a really good idea 491 00:24:55,230 --> 00:24:56,670 of how the different methods 492 00:24:56,670 --> 00:24:59,500 call each other in our application. 493 00:24:59,500 --> 00:25:01,360 So this arrows that you see here 494 00:25:01,360 --> 00:25:04,113 are basically methods calling other methods. 495 00:25:04,990 --> 00:25:05,850 All right. 496 00:25:05,850 --> 00:25:08,680 And that's it, that's our application, 497 00:25:08,680 --> 00:25:10,060 I hope that you liked it 498 00:25:10,060 --> 00:25:13,770 and that you had as much fun as I had building it. 499 00:25:13,770 --> 00:25:16,190 So this was a really great experience, 500 00:25:16,190 --> 00:25:18,780 and now before we actually finish the section, 501 00:25:18,780 --> 00:25:21,170 let's have one more final lecture, 502 00:25:21,170 --> 00:25:23,220 where I will give you some suggestions 503 00:25:23,220 --> 00:25:26,610 of how to improve this application even more. 504 00:25:26,610 --> 00:25:28,393 So let's go there right now.