WEBVTT 00:01.410 --> 00:06.530 All right, as we said in this lecture, we're going to bind data to the local storage dynamically, 00:07.020 --> 00:09.170 you already know how local storage works. 00:09.180 --> 00:14.910 We actually have three main methods which are used for setting items for getting them. 00:14.910 --> 00:17.700 And the third one is for removing items. 00:18.210 --> 00:23.190 One thing to note is that we are able to reach on local storage from any place we want in our code, 00:23.670 --> 00:29.520 but I think will be more organized and convenient to create an object and store dimension methods in 00:29.520 --> 00:30.120 that object. 00:30.960 --> 00:36.130 Local storage is about data and therefore we have to place it in qu'est controller module. 00:36.990 --> 00:41.760 So let's create an object and call it question local storage. 00:46.120 --> 00:54.250 The first method that we are going to pass here is for setting items that's called this method set question 00:54.250 --> 00:54.970 collection. 00:58.560 --> 01:01.530 Then assigned to an anonymous function. 01:04.220 --> 01:10.250 And in order to set items and local storage, let's use a known method which you are already familiar 01:10.250 --> 01:14.700 with, write to your local storage dot set item. 01:15.800 --> 01:21.290 You remember that said items method holds two parameters, one for a key and the second for value, 01:21.290 --> 01:28.610 because data is stored as key value pairs this past year as a first parameter question collection. 01:32.130 --> 01:37.980 Remember, that question collection will be an era in which we will store question objects which are 01:37.980 --> 01:43.500 going to be created using function constructor, the object like this one we have already created in 01:43.500 --> 01:45.560 previous video, which you can see here. 01:46.350 --> 01:54.090 And for the second parameter, we need to use Jassam dot string if a method in order to get back our 01:54.090 --> 01:55.770 data with its original type. 01:56.670 --> 02:00.840 Now we have to pass second parameter, which actually will be the value. 02:01.230 --> 02:04.830 And at this point let's call it new collection. 02:08.050 --> 02:12.310 And also right, the same parameter for function here. 02:15.180 --> 02:21.450 So each time when we invoke this method, it will replace old information with new data. 02:22.560 --> 02:23.010 All right. 02:23.550 --> 02:27.590 The next method that we have to define is for getting data from local storage. 02:28.050 --> 02:31.500 So let's call this method get question collection. 02:36.040 --> 02:46.540 Again, assigned to its anonymous function in this case, this function doesn't need any parameter in 02:46.540 --> 02:51.970 order to get information from local storage with its original data type, we need to use another method 02:51.970 --> 02:55.120 called Jason Dot Pass. 02:55.300 --> 02:58.650 And because of that, we need to get data as a value for function. 02:58.660 --> 03:04.470 We have to use a written statement so right to return and then use the machine method. 03:04.990 --> 03:06.220 Jason, that pass. 03:09.200 --> 03:17.990 Then inside the parenthesis, right, local storage and then use get it a method with the parameter, 03:19.070 --> 03:22.340 which is actually the key to your question collection. 03:25.430 --> 03:25.890 All right. 03:26.780 --> 03:31.290 And the third method to define is for deleting the information from local storage. 03:31.700 --> 03:34.850 Let's call this method remove question collection. 03:38.470 --> 03:48.070 Again, assigned to it an anonymous function and then use remove it method, so right inside, because 03:48.070 --> 03:57.910 of this lack of storage that remove item and inside the parenthesis, pass the parameter again, question 03:57.910 --> 03:58.400 collection. 03:59.260 --> 03:59.770 All right. 04:00.400 --> 04:03.540 So we have set up successfully local storage for question. 04:03.940 --> 04:07.530 You said that in all three methods we use question collection as a key. 04:07.960 --> 04:13.390 So because of that, when we use those three methods, we will deal with the same data in browser local, 04:13.570 --> 04:15.400 which makes sense. 04:17.030 --> 04:17.480 OK. 04:17.920 --> 04:24.310 In previous lecture, we have defined it for question as zero for a while and now it's time to work 04:24.310 --> 04:24.700 on it. 04:25.480 --> 04:31.660 At first, actually consider what is this ID and why do we need it as it's in real world. 04:31.660 --> 04:38.320 And also in our case, ID should be always unique to define ID for question. 04:38.320 --> 04:44.430 Objects dynamically will be a bit confusing because we are going to use kind of tricky way. 04:44.860 --> 04:47.680 So you need to pay attention on it carefully. 04:48.130 --> 04:52.990 In order to be clear, let's demonstrate briefly how we will store data on local storage. 04:53.560 --> 04:57.060 As we said, question collection is going to be an array. 04:58.570 --> 05:05.280 So let's write your empty array and in that array we collect question objects. 05:06.520 --> 05:09.720 You know that these objects hold four properties. 05:09.730 --> 05:16.270 I mean, question text options, correct answer and ID for demonstration purposes. 05:16.270 --> 05:24.550 And to make it real quick, I'm going to use just only ID and now we need to use if else statement, 05:24.550 --> 05:27.820 which actually will check if array is empty or not. 05:28.420 --> 05:28.930 So right. 05:28.930 --> 05:31.900 If that inside the parenthesis. 05:31.900 --> 05:32.200 Right. 05:32.410 --> 05:38.460 Question local storage that gets question collection. 05:39.010 --> 05:44.200 So now we have access on the array from local storage and in order to check the length of it we can 05:44.200 --> 05:48.370 just write that length is greater than zero. 05:51.040 --> 05:57.220 So if Iraq is empty, then a length will be zero and the condition will be false. 05:58.330 --> 06:05.260 So for the first item, when we fill up a text area and then check correct answer and click on insert, 06:05.650 --> 06:07.010 the condition becomes false. 06:07.630 --> 06:13.950 Therefore, we need a statement in which we will define question ID as zero the right else. 06:14.950 --> 06:19.470 And then inside the color Brice's question id equal to zero. 06:21.730 --> 06:25.580 Let's delete above question id equals to zero. 06:26.950 --> 06:31.740 So for first question, object ID property will become zero. 06:32.410 --> 06:38.870 But as for defining id for the next question object, we need to do it in a smart way. 06:40.270 --> 06:44.680 Let's right question ID at first. 06:44.680 --> 06:51.070 Let's get access on question collection array for that we have to use gets question collection method. 06:51.460 --> 06:56.320 Right question lack of storage that gets question collection. 06:58.750 --> 07:03.430 And now we have to define index number for last item. 07:03.640 --> 07:12.070 The index number for last item is equal to array length minus one, so let's copy it then open square 07:12.070 --> 07:18.880 brackets and paste and then use length property and then minus one. 07:22.840 --> 07:30.310 So for now, we have access on the last item of an array, and in order to increase I.D. of next item 07:30.310 --> 07:39.130 by one dynamically, we have to access on ID property of the last item, the right ID and then plus 07:39.130 --> 07:39.430 one. 07:42.370 --> 07:51.460 All right, so when we add next question, object, and for that click install button function will 07:51.460 --> 07:58.750 be invoked, the condition inside if statement will be true, because we already have one question object 07:58.750 --> 07:59.440 in the array. 07:59.920 --> 08:08.410 And using this line of code, JavaScript engine will find out what is idee of previous object it will 08:08.890 --> 08:17.740 want to eat and ID for new object will be one and the same will happen for next coming question. 08:17.740 --> 08:20.440 Objects make sense. 08:22.190 --> 08:28.780 I know that it's a bit confusing and complicated, but if you think about it and try to do your best 08:29.650 --> 08:30.400 will get that. 08:30.400 --> 08:32.720 It's not actually so hard to understand. 08:33.940 --> 08:34.420 All right. 08:35.140 --> 08:40.830 For now, we can definitely say that all the parameters, including ID, are ready for function constructor. 08:41.230 --> 08:45.520 And the next thing that we are going to do is to insert new questions in local storage. 08:46.450 --> 08:50.110 Because of that, we use the local storage instead of a real database. 08:50.770 --> 08:55.120 We need to first get an array, then change it. 08:55.690 --> 09:01.480 In this case, add new question and then again set this changed information into your local storage. 09:02.410 --> 09:09.430 Now we have to declare and use new variable and we have to do it definitely in order to copy and save 09:09.430 --> 09:16.870 data and use part of memory space, then manipulate on that data and insert again in local storage as 09:16.870 --> 09:17.480 a new one. 09:18.100 --> 09:23.200 So create variable and call it get stored questions. 09:26.660 --> 09:33.060 And then assigned to the variable data from local storage, which actually will be an array. 09:33.710 --> 09:34.490 So right. 09:34.790 --> 09:43.370 Get stored questions equals to question local storage that gets question collection. 09:46.360 --> 09:52.360 Then in order to add a question object as a new item to the array, I'm going to use push method. 09:53.020 --> 10:04.210 So right below get questions, dot, push and as a parameter, let's pass your new question. 10:07.160 --> 10:14.930 And then overnight, new information to the old data, so right question local storage. 10:17.660 --> 10:30.180 Then use subquestion collection method and inside the parentheses as an argument that's got stored questions. 10:31.040 --> 10:31.510 All right. 10:32.480 --> 10:34.100 Finally, it's time to test. 10:34.670 --> 10:38.360 Let's consider what we have changed. 10:38.360 --> 10:40.730 New question into question. 10:40.880 --> 10:43.970 Local storage that gets question collection. 10:45.170 --> 10:51.770 Then go to the browser, reload the page and write a simple question right again. 10:51.780 --> 10:52.510 How are you? 10:54.830 --> 10:56.270 And then as options. 10:56.270 --> 10:57.440 Right, fine. 10:57.890 --> 11:03.950 And but then check, answer, click, insert. 11:04.790 --> 11:06.670 And of course, we have an error. 11:07.880 --> 11:12.090 So it tells us that it cannot wait the length property up. 11:12.110 --> 11:18.650 Now do you remember that when local storage is empty or requested, key doesn't exist? 11:19.010 --> 11:20.920 That would get the value now. 11:21.680 --> 11:28.690 So in the moment of adding a new question, local storage was empty and of course, JavaScript engine 11:28.700 --> 11:29.990 couldn't read length. 11:29.990 --> 11:33.190 Property of now makes sense. 11:35.060 --> 11:38.130 So we need somehow to avoid this error. 11:38.540 --> 11:43.910 For that, I'm going to use simple if statements in which we will write the code which will prepare 11:43.910 --> 11:46.130 local storage for question object. 11:47.000 --> 11:47.660 So right. 11:47.660 --> 11:54.290 If before we write condition, let's take a look on browser local storage. 11:57.710 --> 12:02.720 So you see that it's empty and that's why we get an error. 12:03.290 --> 12:07.690 Our goal is to always exist here at least and empty it. 12:07.760 --> 12:08.000 Right. 12:10.310 --> 12:15.770 OK, so as a condition, we need to indicate a situation where the value of key is null. 12:16.370 --> 12:21.800 Therefore, we need to write question a lack of storage that gets questioned collection. 12:24.310 --> 12:25.780 Triple equals to No. 12:28.610 --> 12:35.030 So if this condition is true, if key for question collection doesn't exist, then we create an empty 12:35.090 --> 12:36.560 right for that. 12:36.790 --> 12:37.400 That's right. 12:37.400 --> 12:46.570 Question a lack of storage that set question collection and then as an argument plays here, an empty 12:46.580 --> 12:46.910 array. 12:48.860 --> 12:59.180 OK, let's test again, go to the browser, reload the page and write again the same question. 12:59.780 --> 13:00.530 How are you? 13:02.900 --> 13:04.400 And then some options. 13:07.890 --> 13:09.390 Check the correct answer. 13:10.050 --> 13:16.410 Click on insert, and here we go, we have your question, object in a right. 13:17.910 --> 13:22.370 Let's click multiple times on insert button and you see that question. 13:22.390 --> 13:26.120 Object is added again and again on every click. 13:26.490 --> 13:37.540 If we drop down an object, we can see that ID's of each object are different and increase by one. 13:38.730 --> 13:39.230 All right. 13:40.080 --> 13:41.310 Everything is fine. 13:41.340 --> 13:42.540 The code works great. 13:43.050 --> 13:47.370 But you notice that when we add questions, inputs are still filled. 13:48.930 --> 13:54.900 If we miss inserting, for example, the question text question will be added without it. 13:55.890 --> 14:02.610 Oh, so if we make all the inputs empty, the question will be still added to the local storage. 14:03.390 --> 14:08.490 So before we add a question to the storage, we need to make user protect some rules. 14:09.310 --> 14:11.460 OK, let's do it in the next video.