Welcome back, my friend, to another lecture today, we're going to learn about storage, local storage
and storage was the difference between them.
Why do we need them?
So we don't have any database to actually store the data.
Right.
But with JavaScript, we can store that data and we can store that.
You're using a local storage, not the local storage, that they don't be there after we closed the
browser.
So, for example, if there is something here, so key and value pairs, we do have key and valuable.
So key should be, for example, anything in the value can be also anything.
And if we close this one.
So I'm just starting this Google Chrome.
Right.
It's a little bit different in Firefox, but if we close this one in the local storage, the data will
stay here.
Otherwise the section storage, the data will not stay there.
So that is the difference.
So if I close the browser because it's a section, the section will expire and that's pretty much it.
There is no data anymore.
No, I have this local storage and we have a written for method's set item, get item, remove item
and clear them from the storage.
So any method we use here can be used for a local in session.
Now I'm just going to copy this e-mail.
I'm going to based it.
I'm going to rename as a storage
and because I don't want to mess around with the index right now here.
Local and session storage with JavaScript.
Make it like that now you need to go to storage that HTML.
Here it is.
It's not good looking.
So I'm going to see style here.
So I'm putting in line style.
This is how you utilize the text, a line to center that should fix.
Yes.
Now it's fixed.
And I do have some gibberish here that is coming from.
Yeah.
This is coming from a source, Matt Eurail.
Don't worry about it's not error.
So yeah.
I don't know what was the problem.
Yeah.
So I'm just going to clear you can clear up now here in the U.S. ally.
I just want to comment this, remove all of this.
And if I refresh.
Yeah.
I don't have any elai elements then to remove all of these and I'm going to call this one local storage.
So in the local storage, you will learn now how to set a data, set an item, extract that item and
yeah, a lot of interesting things.
Now, first things first.
We need to I'm just going to copy this one and I'm going to make it like this sad item and we're going
to see local storage.
That's the key word that that set item in is that we need to put my key word here.
You can be your name and here we will be the value.
We will say my value.
Yeah, well, I like that so you can be named.
You can be your last name, whatever you want.
The first part is the key.
The last second part after the comma is the actual value.
Now, that is how we can set it.
So what we can do is actually we can just refresh this one.
And here it is, Mikey, why is this bother me that OK, so in the local storage, I have my key and
my value, right.
How cool is this?
There you go.
No, I'm just going to open it.
Google.
I mean, I'm going to open in Firefox and I'm going to show you that it's going to be pretty much the
same time.
You need to go to storage HDMI.
I'm going to refresh inspect element.
There is a storage.
You don't go in cookies, by the way.
You need to go to the local storage area is my key.
My my value.
Right.
So this is your data.
This is the first part is the key after the semicolon is my data my value.
Now this is how we can set.
Now let's do something else.
Get item.
That's the fastest way we can learn.
Now I'm going to store this one in variable called var item and I'm going to store it and I'm going
to say, OK, get item looked the description, sorry, whichever value by the Iraqi.
And this is the key.
So I'm going to use it to store it and get items.
Should be right.
It's not going to work otherwise.
Now I can cassella the item or what is better.
What we can do we can alerta.
Let's save it.
Let's refresh it really is my values there.
Otherwise I will need to go to Inspecteur here and find a way.
Right.
Same should be your Google Chrome right now.
I'm just going to comment this part so you can use both of this.
So if you do console, make sure that you go to the console.
Should be here.
Ignore all this nonsense.
Right, clear what's happening.
So even if you go to Google, look with what's happening, Google dot com and if you go inspect, look
how many errors they're going to have.
Wow.
They did OK.
Yeah.
Say it's a yeah yesterday.
They have like tons of errors but in different browser, I'm just going to show you in different browser
there's a different errors.
So I'm going to console.
Here it is.
How cool is this?
These are coming from some of them, black shadow, stuff like that.
Don't worry about those errors.
So I'm going to clear them.
And you don't need them, especially now.
Oh, good.
So we know two things.
We ought to set one to get one.
Now, how do we remove an item?
That's a that's one of the good things that we can remove from our local storage.
So you can use the remove.
And I don't need these more item here in actually, I'm not going on alert or anything, so I'm going
to remove my dear item by their key.
So this is the key.
Now I do have it here.
Here it is.
So when I refresh gone, if I go here, if I refresh, if I go to application here, there are a lot
of other things, but there is nothing.
There is no my key right now.
If you want to get rid of this, I'm going to show you the last one.
So that is a good item.
So actually that was remove item.
Sorry, I'm just keeping things, guys.
Keeping things that's healthy now.
We don't need those things now.
I'm just going to copy it and I'm going to put it here in the last part is clear.
That will clear all local storage and you don't need to set any valuables, any keys here, no CDS ordinances
here that we have to close all of these things.
So when I do it like this, there will be cleared.
How cool is this?
So it's clear everything that is in our database, I mean, in local storage.
So I'm just going to just going to comment this.
But now one more thing.
So we're going to set the item here.
I'm not going to clear I'm just going to comment all of this.
I'm just going to come I'm just going to do it like that.
So there is my key.
Right.
And after that, a bunch of other things that you don't need to know.
I'm no special storage, as I told you.
If we now I'm just going to copy the URL.
I'm going to close this one.
I'm going to close this one as well.
And I'm going to say Google here.
I'm going to go there.
So I'm just load again, inspect it, and I should be able to see my value here.
It is still there intact.
Right.
Section storage.
When I do that, first, I need to set it here.
So I'm just going to tell you how how you can sell.
So session storage set item in here.
My key, my session value.
I'm going to do it like this.
So I'm just going to refresh one more time.
Now, if you go in a session storage here, it's my session value.
But look what's happening now.
So because we set it once more, we're just going to comment this one.
I'm going to comment everything now.
So we everything now we we need to comment because we don't want to sell it again right now.
I'm just going to close it here.
I'm going to open even the Google Chrome.
So, yeah, localhost.
I lost that thing down and I think more storage.
Here it is now.
I'm just going to go in on a specter and go into storage and I'm going to local storage.
Local storage is empty.
It was empty.
Oh yeah.
Because I've just done it that way.
That way.
Right.
So we don't have those both keys.
Let's initialize it said keys set value.
Right.
So here I do have set for a local in session storage both.
Now, I'm just going to close it.
I'm just going to comment everything.
Right here, if I refresh, it's going to be there, so I'm going to copy that one.
So when I go back here, I do expect the local storage to be there because I didn't remove it.
He wants I hold it, I've no idea.
Just wait.
I need to test this one in the other browser as well.
So you should, by definition, should hold it right now.
I'm just going to inspect their location.
So local storage should hold the value.
Here it is.
I don't know what's what's happening with the with Google Firefox, but it should hold the value in
this one.
It's not there anymore.
Right.
So it holds here the value, but it's not holding in storage.
So make sure that I've have no idea, maybe in settings have to set something right.
Maybe that's the case.
If that is the case where you just tell me where I need to fix that one.
Right.
But by definition, the local storage and all the value in storage when you restart the browser, I'm
just going to start the Google Chrome again just to tell you that it's working now.
I'm going to go inspect it.
Good applications, local session is nothing.
And we do have my key.
Plus, we do have these two things that we don't need.
Right.
So, yeah, now that is how you can set get remove clear.
Now, I'm not going to show you one lot more things with this, but we are going to do a little bit
more interesting something next time.
It's going to be better than this.
So you know how to use the storage, how to set a value, how to remove by the key.
And you can put more more items in your storage.
Right.
You can retrieve them.
You can do whatever you want.
But use this Google Chrome because I don't know, it should work.
Same with the Firefox, but maybe somewhere in the settings.
I have done something.
So thank you very much.
I hope you enjoy this one.
Now you're master of local storage in session storage.
Thank you.