WEBVTT 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.