WEBVTT 00:01.140 --> 00:06.750 As you noticed in our project overview of the rule of the page, we still maintain the data, I mean 00:06.750 --> 00:11.370 questions and final result of users, and it was because of local storage. 00:11.970 --> 00:13.770 It's very easy to understand and use. 00:13.800 --> 00:17.480 So I will briefly describe what local authorities and how to use it. 00:18.000 --> 00:25.170 It is a built in memory space and a Web browser which holds permanently information about 100 megabytes. 00:25.680 --> 00:28.090 And it's absolutely enough for our application. 00:28.590 --> 00:34.850 Let's see, where can we find local storage in a Web browser that we need to open dev tools and then 00:34.860 --> 00:36.420 go to application section? 00:37.740 --> 00:40.880 And in storage part, we can find local storage. 00:41.820 --> 00:46.770 Let's drop down it and it will have a place where our data will be stored. 00:47.400 --> 00:51.450 The information which we will add here will be saved as key value pairs. 00:52.380 --> 00:54.450 All right, let's go back to Brackett's. 00:54.600 --> 01:00.030 We don't need this coats inside modules anymore, so let's delete them. 01:02.850 --> 01:09.360 And also for each module, that's a right to comment, because when the amount of the code is increased, 01:09.360 --> 01:14.770 it will be a little bit hard to find is part of the code without comments for modules. 01:14.790 --> 01:20.790 I would like to use kind of different comments in order to clearly separate and find them. 01:23.240 --> 01:33.290 Let's copy and paste for a second module and right here, UI controller, and then do the same for the 01:33.290 --> 01:36.200 third module, which is controller. 01:37.070 --> 01:41.450 OK, let's continue talking about like storage throughout the project. 01:41.460 --> 01:47.210 We will need to use three main methods which are set item, get item and remove item. 01:47.570 --> 01:50.200 In order to have access on local storage. 01:50.210 --> 01:52.610 We need to write it with cavalcades. 01:53.610 --> 01:59.380 And then in order to add the item we need to attach to it, set it a method using documentation. 02:00.180 --> 02:02.190 This method holds two parameters. 02:02.610 --> 02:05.370 As we said, the information is stored as key value pair. 02:05.410 --> 02:11.620 So first parameter will be a key, which will be used then to gather information from local storage. 02:12.120 --> 02:20.090 So right here, for example, data and remember that it should be always passed as a string. 02:21.060 --> 02:26.640 As for the second parameter, which is the value we can pass for any data type we want, but when we 02:26.640 --> 02:30.460 get it back, that type will be always transformed into string. 02:31.260 --> 02:33.200 So let's pushier array. 02:34.470 --> 02:37.260 Write the numbers from one to four. 02:37.950 --> 02:41.340 So now this data is stored in local storage. 02:41.760 --> 02:48.690 In order to see that, let's go to the browser, reload and you see the data with numbers. 02:49.230 --> 02:53.950 In order to get back this data, we need to use another method, which is get item. 02:55.680 --> 02:57.030 So that's right. 02:58.920 --> 03:04.420 Cancel that look like a storage dot get item. 03:05.490 --> 03:10.170 This method holds one parameter, which is key in our case, it's data. 03:10.200 --> 03:11.580 So right here, data. 03:15.040 --> 03:18.970 Then reload again and check the console. 03:21.090 --> 03:27.510 You see that instead of an array, we have just numbers, actually, these numbers are represented as 03:27.510 --> 03:28.340 a street value. 03:29.040 --> 03:35.310 Let's prove that and check the type of the data right here type of operator. 03:38.540 --> 03:48.110 Then again, reload and see that it's definitely a strain, actually, it's a problem for our application, 03:48.710 --> 03:51.200 so we need somehow to avoid it for that. 03:51.620 --> 03:54.430 There are two methods which will actually solve this problem. 03:54.980 --> 03:57.670 First method is Jason doctrine. 03:57.710 --> 04:02.260 If so, right here before Arae. 04:02.810 --> 04:05.450 Jason Dart throwing if. 04:08.530 --> 04:10.900 And surround the array with parentheses. 04:13.190 --> 04:18.890 Let's go to Browsr and check again memory, go to application. 04:20.160 --> 04:21.060 And without. 04:23.160 --> 04:28.330 You see that now the value is a little bit different instead of just numbers. 04:28.380 --> 04:36.270 Now we have them in square brackets, but if we check cons. still, we will have data type of the value 04:36.270 --> 04:37.040 as string. 04:38.610 --> 04:45.120 So in order to get the data, but with its original type, we need to use another method called Jason. 04:45.120 --> 04:47.690 Don't pass it first. 04:47.700 --> 04:51.720 Let's remove type of operator and then right. 04:52.380 --> 04:54.180 Jason that pass. 04:57.250 --> 05:04.520 Let's go to Browsr, reload, and that's what we wanted. 05:04.810 --> 05:06.280 We got back an original. 05:06.320 --> 05:08.100 All right, OK. 05:08.590 --> 05:14.980 The next thing I want to show you is that if we insert other data using Sankei, then we will lose old 05:14.980 --> 05:17.810 content and new data will be added to local storage. 05:18.640 --> 05:24.840 It means that when we use the same key and add new items to storage, then we just overwrite them. 05:25.810 --> 05:32.020 So that's duplicate this line and change it right into, for example, an object. 05:35.350 --> 05:38.080 Then go to Browsr, reload. 05:39.190 --> 05:48.180 And you said that we have an object, only Erra is deleted if we check the storage, we will see at 05:48.190 --> 05:50.590 the new data instead of old content. 05:52.200 --> 05:58.530 All right, the last thing that I want to show you is how to remove the information from local storage. 05:59.070 --> 06:04.650 For that, there is another method called remove item, which holds one parameter. 06:05.160 --> 06:06.980 It is a key of the data. 06:07.440 --> 06:08.460 So that's right. 06:08.460 --> 06:14.190 It's up to the set item methods, local storage that remove item. 06:17.780 --> 06:29.840 And here are the parameter as data that a revote and you see that we have now data type here because 06:29.840 --> 06:35.670 actually data is remote from the storage and get items returned null value. 06:37.070 --> 06:41.420 Remember that if there doesn't exist, the data we always get. 06:41.450 --> 06:48.470 Now let's check the storage and you see that it's empty. 06:49.460 --> 06:49.940 All right. 06:50.900 --> 06:54.750 Actually, that's what we need to know throughout building our project. 06:55.100 --> 06:56.210 So let's go ahead.