All right, as we said in this lecture, we're going to bind data to the local storage dynamically,
you already know how local storage works.
We actually have three main methods which are used for setting items for getting them.
And the third one is for removing items.
One thing to note is that we are able to reach on local storage from any place we want in our code,
but I think will be more organized and convenient to create an object and store dimension methods in
that object.
Local storage is about data and therefore we have to place it in qu'est controller module.
So let's create an object and call it question local storage.
The first method that we are going to pass here is for setting items that's called this method set question
collection.
Then assigned to an anonymous function.
And in order to set items and local storage, let's use a known method which you are already familiar
with, write to your local storage dot set item.
You remember that said items method holds two parameters, one for a key and the second for value,
because data is stored as key value pairs this past year as a first parameter question collection.
Remember, that question collection will be an era in which we will store question objects which are
going to be created using function constructor, the object like this one we have already created in
previous video, which you can see here.
And for the second parameter, we need to use Jassam dot string if a method in order to get back our
data with its original type.
Now we have to pass second parameter, which actually will be the value.
And at this point let's call it new collection.
And also right, the same parameter for function here.
So each time when we invoke this method, it will replace old information with new data.
All right.
The next method that we have to define is for getting data from local storage.
So let's call this method get question collection.
Again, assigned to its anonymous function in this case, this function doesn't need any parameter in
order to get information from local storage with its original data type, we need to use another method
called Jason Dot Pass.
And because of that, we need to get data as a value for function.
We have to use a written statement so right to return and then use the machine method.
Jason, that pass.
Then inside the parenthesis, right, local storage and then use get it a method with the parameter,
which is actually the key to your question collection.
All right.
And the third method to define is for deleting the information from local storage.
Let's call this method remove question collection.
Again, assigned to it an anonymous function and then use remove it method, so right inside, because
of this lack of storage that remove item and inside the parenthesis, pass the parameter again, question
collection.
All right.
So we have set up successfully local storage for question.
You said that in all three methods we use question collection as a key.
So because of that, when we use those three methods, we will deal with the same data in browser local,
which makes sense.
OK.
In previous lecture, we have defined it for question as zero for a while and now it's time to work
on it.
At first, actually consider what is this ID and why do we need it as it's in real world.
And also in our case, ID should be always unique to define ID for question.
Objects dynamically will be a bit confusing because we are going to use kind of tricky way.
So you need to pay attention on it carefully.
In order to be clear, let's demonstrate briefly how we will store data on local storage.
As we said, question collection is going to be an array.
So let's write your empty array and in that array we collect question objects.
You know that these objects hold four properties.
I mean, question text options, correct answer and ID for demonstration purposes.
And to make it real quick, I'm going to use just only ID and now we need to use if else statement,
which actually will check if array is empty or not.
So right.
If that inside the parenthesis.
Right.
Question local storage that gets question collection.
So now we have access on the array from local storage and in order to check the length of it we can
just write that length is greater than zero.
So if Iraq is empty, then a length will be zero and the condition will be false.
So for the first item, when we fill up a text area and then check correct answer and click on insert,
the condition becomes false.
Therefore, we need a statement in which we will define question ID as zero the right else.
And then inside the color Brice's question id equal to zero.
Let's delete above question id equals to zero.
So for first question, object ID property will become zero.
But as for defining id for the next question object, we need to do it in a smart way.
Let's right question ID at first.
Let's get access on question collection array for that we have to use gets question collection method.
Right question lack of storage that gets question collection.
And now we have to define index number for last item.
The index number for last item is equal to array length minus one, so let's copy it then open square
brackets and paste and then use length property and then minus one.
So for now, we have access on the last item of an array, and in order to increase I.D. of next item
by one dynamically, we have to access on ID property of the last item, the right ID and then plus
one.
All right, so when we add next question, object, and for that click install button function will
be invoked, the condition inside if statement will be true, because we already have one question object
in the array.
And using this line of code, JavaScript engine will find out what is idee of previous object it will
want to eat and ID for new object will be one and the same will happen for next coming question.
Objects make sense.
I know that it's a bit confusing and complicated, but if you think about it and try to do your best
will get that.
It's not actually so hard to understand.
All right.
For now, we can definitely say that all the parameters, including ID, are ready for function constructor.
And the next thing that we are going to do is to insert new questions in local storage.
Because of that, we use the local storage instead of a real database.
We need to first get an array, then change it.
In this case, add new question and then again set this changed information into your local storage.
Now we have to declare and use new variable and we have to do it definitely in order to copy and save
data and use part of memory space, then manipulate on that data and insert again in local storage as
a new one.
So create variable and call it get stored questions.
And then assigned to the variable data from local storage, which actually will be an array.
So right.
Get stored questions equals to question local storage that gets question collection.
Then in order to add a question object as a new item to the array, I'm going to use push method.
So right below get questions, dot, push and as a parameter, let's pass your new question.
And then overnight, new information to the old data, so right question local storage.
Then use subquestion collection method and inside the parentheses as an argument that's got stored questions.
All right.
Finally, it's time to test.
Let's consider what we have changed.
New question into question.
Local storage that gets question collection.
Then go to the browser, reload the page and write a simple question right again.
How are you?
And then as options.
Right, fine.
And but then check, answer, click, insert.
And of course, we have an error.
So it tells us that it cannot wait the length property up.
Now do you remember that when local storage is empty or requested, key doesn't exist?
That would get the value now.
So in the moment of adding a new question, local storage was empty and of course, JavaScript engine
couldn't read length.
Property of now makes sense.
So we need somehow to avoid this error.
For that, I'm going to use simple if statements in which we will write the code which will prepare
local storage for question object.
So right.
If before we write condition, let's take a look on browser local storage.
So you see that it's empty and that's why we get an error.
Our goal is to always exist here at least and empty it.
Right.
OK, so as a condition, we need to indicate a situation where the value of key is null.
Therefore, we need to write question a lack of storage that gets questioned collection.
Triple equals to No.
So if this condition is true, if key for question collection doesn't exist, then we create an empty
right for that.
That's right.
Question a lack of storage that set question collection and then as an argument plays here, an empty
array.
OK, let's test again, go to the browser, reload the page and write again the same question.
How are you?
And then some options.
Check the correct answer.
Click on insert, and here we go, we have your question, object in a right.
Let's click multiple times on insert button and you see that question.
Object is added again and again on every click.
If we drop down an object, we can see that ID's of each object are different and increase by one.
All right.
Everything is fine.
The code works great.
But you notice that when we add questions, inputs are still filled.
If we miss inserting, for example, the question text question will be added without it.
Oh, so if we make all the inputs empty, the question will be still added to the local storage.
So before we add a question to the storage, we need to make user protect some rules.
OK, let's do it in the next video.