1 00:00:00,210 --> 00:00:08,070 So our app works pretty nicely, but the problem is the moment I will refresh, of course, I'll lose 2 00:00:08,070 --> 00:00:09,090 all my values. 3 00:00:10,110 --> 00:00:17,140 In order to fix that, we'll need to use one of the browser APIs and I want is for the local storage. 4 00:00:17,560 --> 00:00:22,320 Now, as you can see, I already have the key value pair for my list, which of course I'm going to 5 00:00:22,320 --> 00:00:25,890 delete right now just so I can start from scratch. 6 00:00:26,220 --> 00:00:33,030 But the way it works is I would just want to call the local storage, which of course is the name. 7 00:00:33,210 --> 00:00:34,860 And then we have few methods. 8 00:00:34,860 --> 00:00:37,770 And the one that I'm interested is set item. 9 00:00:38,070 --> 00:00:42,480 Now we want to call it every time something changes in my list. 10 00:00:42,690 --> 00:00:44,620 So I'd want to do that using the user. 11 00:00:45,150 --> 00:00:51,420 So we go with my usufruct and then I'll say that every time the list changes, what I would want to 12 00:00:51,420 --> 00:00:57,980 do is call the local storage, then set item, and then it is key value pairs. 13 00:00:58,230 --> 00:01:00,310 So we need to come up with a name. 14 00:01:00,330 --> 00:01:02,220 In my case, that is going to be a list. 15 00:01:02,490 --> 00:01:06,350 And then the second thing is we only can store it as a string. 16 00:01:06,750 --> 00:01:12,250 So we're going to go out Jessan and string Afie and then we pass in the list. 17 00:01:12,570 --> 00:01:18,510 So now every time you do something with the list, we will wipe out the old values because essentially 18 00:01:18,510 --> 00:01:23,490 we will overwrite and will save the latest values of the. 19 00:01:24,120 --> 00:01:26,520 So technically everything should work. 20 00:01:26,520 --> 00:01:32,280 But of course, we'll also have to handle that when initially we set up the list, because at the moment 21 00:01:32,490 --> 00:01:33,470 it is an empty array. 22 00:01:33,600 --> 00:01:39,300 But since first I would want to showcase that, once we add something, we should see the values. 23 00:01:39,630 --> 00:01:41,270 Let's go with first item. 24 00:01:42,150 --> 00:01:42,710 There it is. 25 00:01:42,720 --> 00:01:45,900 Now it is added the second item. 26 00:01:46,820 --> 00:01:50,930 And now we have a list of the items, so as you can see, this works. 27 00:01:51,400 --> 00:01:57,690 The problem is that once I refresh, I still start with a empty road. 28 00:01:58,200 --> 00:02:00,000 OK, so how I can fix that? 29 00:02:00,020 --> 00:02:02,180 Well, I would need to navigate back. 30 00:02:02,510 --> 00:02:05,150 I would need to go to my app. 31 00:02:05,570 --> 00:02:08,690 And I notice here where we setting this up as an empty array. 32 00:02:09,090 --> 00:02:10,630 I will change this around the world. 33 00:02:11,120 --> 00:02:19,570 First, I'm going to come up with a function in seconds and then get local and storage work. 34 00:02:19,590 --> 00:02:24,340 So and one is equal to more function, of course. 35 00:02:24,950 --> 00:02:31,670 And now I just want to start by getting that item from the local storage Michelet list, some kind of 36 00:02:31,670 --> 00:02:32,330 variable name. 37 00:02:32,570 --> 00:02:33,470 What was storage? 38 00:02:33,470 --> 00:02:37,660 And then instead of Sitaram, I'm looking for get item and I'm looking for the list. 39 00:02:38,120 --> 00:02:43,790 Now there's going to be two options, either exists or it doesn't. 40 00:02:44,510 --> 00:02:51,110 So if it does exist, then of course it is going to be truthy, meaning it is going to be evaluated 41 00:02:51,110 --> 00:02:52,700 in the condition to travel. 42 00:02:53,120 --> 00:02:55,550 And then of course, I would want to return it. 43 00:02:55,880 --> 00:02:58,570 If not, then I would want to return empty. 44 00:02:58,610 --> 00:02:59,010 All right. 45 00:02:59,390 --> 00:03:01,000 So at least some kind of basic value. 46 00:03:01,280 --> 00:03:05,960 So I'm going to say, if less so, if the list exists, then I have my condition. 47 00:03:06,320 --> 00:03:10,010 Then I'll say return and please return. 48 00:03:10,010 --> 00:03:11,470 Jesson pass. 49 00:03:11,660 --> 00:03:16,970 Since we're storing this string, we also need to pass it and we go to a local storage and then get 50 00:03:16,970 --> 00:03:21,980 item and then we pass in the name that we set up previously. 51 00:03:22,400 --> 00:03:25,700 So since previously I used the list. 52 00:03:25,850 --> 00:03:27,210 So that was the name for Macchi. 53 00:03:27,500 --> 00:03:32,080 Now I also need to of course get the item whose key is list. 54 00:03:32,330 --> 00:03:34,190 However, that is not the case. 55 00:03:34,400 --> 00:03:40,280 If list doesn't exist, then of course I would want to return an empty array, but I definitely need 56 00:03:40,280 --> 00:03:41,120 to return something. 57 00:03:41,420 --> 00:03:45,800 And then notice here where we're setting up the use that instead of empty array, which is going to 58 00:03:45,800 --> 00:03:48,680 go with get local storage and fork it. 59 00:03:49,220 --> 00:03:53,330 Now you'll notice that by default, of course, it is an empty array. 60 00:03:53,690 --> 00:03:55,460 But if I start adding the items. 61 00:03:55,460 --> 00:03:56,180 First item. 62 00:03:56,690 --> 00:03:57,860 Second item. 63 00:03:58,160 --> 00:04:02,980 Now when my app renders, I still get those values. 64 00:04:03,340 --> 00:04:09,620 So now, of course, if I delete and again if I refresh, it is still stored in the local storage. 65 00:04:09,830 --> 00:04:10,760 That's our grocery. 66 00:04:10,760 --> 00:04:14,810 But hopefully everyone enjoy the project and I hope to see in the next one.