Hello and welcome to this video.
In this video be showing you how to store it.
Email from input in low call storage or be using jabba's script and three methods inside javascript
cord said item.
Get high and remove it.
Set item issue is to specify the values for the item you want to store they are stored in the key value
pair object.
For example a key could be text or first name and value could be for example Rachel.
Then they get high term is used to retrieve the item that has been saved remove it is used to remove
the item that has been saved.
I have already created a form.
This is the form here and is this the input to also created some javascript functions and methods that
will handle the storage for this form.
Just to save time I I've already written the javascript I'll just walk you through the various aspects.
So I've got three functions I have created.
The first one is called Save.
What this will do it will see the input has been entered in here.
Once you click on the save button then the what's in between.
So this is a first function here.
So what does function will do.
It will see in the input that has been entered and inside the function.
Notice that they are called braces.
In raining here inside of collaboratives.
I have defined the variable name on the variable code name and is equal to documentum to get eliminated
by a D and the is the first name I have a look at the form here.
This is way as the fairly from the Heidi.
So I've got an idea here.
The value is.
First name inside the form.
This is the form that you can see this form here inside the form.
I have created.
There are two buttons here.
The first save these save button here.
Attached On Click event so this click event is equal to deceive function greater the function courts
say.
So when someone clicks on say in their name it will do what has been specified inside this same function.
It will save the data and then have also created another click event and or click event swap.
When a user enters details you can also you want to remove the data that's been entered.
You can use to remove button click on it and it will respond to do removed function and remove the data
that's been entered.
That's what that does.
Let's go back to the functions I have specified.
So I created 3 function as the first one.
This one here the say function this will handle data that's been entered and you took say it at all.
This is a local cerate you have to define a local storage is in the set right and then specify the right
key and the value.
The key here is the text the values is name which is the name of this variable here.
So whatever name is typed into the form or grip it will be saved.
Has the name variable here.
Then we've got the local story to handle the saving and then the other function I've created.
Is a function called retrieve.
What these will do it will retrieve the data that has been saved.
When next you open the web browser.
This is defined a variable called retrieve data and giving the value of local storage.
Don't get tempted to get item This used to retrieve data that has been saved and the value here is text
and then this is just a condition to check if the value is present so the value is present.
Then it will return.
If not it will return the value of on defined.
So this is basically used to check if the value you are looking for is dead.
Then cocreator done it off from here called removed.
So if you want to remove any day Tyler you have entered this is what you would use to remove a dictator.
So any data that's been entered here you can remove.
You did not remove it.
This method here is the javascript method used to remove data that has been stored and in value is specified
inside the text.
So let's check that out and see how that works.
Go run lunch in Chrome.
So I type in the name let me type in Rachel.
Click save.
So fi.
Expand that.
Now click on this using Google Chrome.
Click on that click on More tools developer tools and then click on resources local story each click
on file.
We can see Rachel has been safe.
So this is the text.
The text is the key values.
Rachel sweet save the day to Rachel.
So if we want to remove data as being safe we can click on that and it will fire up the function code
removed and remove Rachel from the database.
If I click on that and go back and go more tools developer tools in notice the date our chore has disappeared
because I have removed it.
So this button saves the old arnwine remote so let me just type in different a time typing be there
click save and go.
But two's more check that sorry notice is saved the day tab just entered Peter.
Again for one remove that I just click on the remote button and it should remove the.
There are various ways you can store data in your local pizza so you can use a web Eskew El index TB.
We have used local storage in this example.
You can also use session storage session storage is the same as local storage.
The difference that sessional storage and was the browser is closed.
It doesn't retain any data.
It deletes it whereas the local story still keeps the data as you can see here.
So a weak web Escuela index dbe not all browser supports it.
So there is a bit of fragmented support still some support where bascules support indexed.
So if you you build in local application to utilize local story so you can use Web bascule indexed TB
or and then in combination with the application cache.
So the example I have shown you here we only store one data at a time so if I type in something else
here now it will replace what I've already saved.
So it is possible to see multiple values in one key but you have to use things like a list or three.
Also using son Jason stands for javascript object notation.
So these are more complex more complex ways of doing it.
And it's beyond the scope of this field.
But just a simple is easy.
Just to show you a simple way that you can store just one data value at a time.
I hope this video has been used for.
I apologize if this can be complicated I the code here would be available to download just go to put
it code and if there are any parts you do not understand please let me know.
The example here is chorse for storing just one item at a time so the more more example the to store
multiple values is beyond the scope of this feed you are creating a better fit your on storage later
in the New Year.
We should cover how you talk more to poor values either using the Web rescue or indexed.
Or we can use arrays to store multiple values inside one key buffer.
The purpose there is schedule you were just just to store one item at a time.
Thank you so much for watching.
Take care.
Bye for now.