Hey, everyone, in this video, we're going to talk about local storage, which is a property of the
window object that can store data in the user's computer.
So by doing this, we can remember information to use every time the user visits our website.
So it doesn't matter if the user closes the current tab or even the browser, it doesn't matter if the
user turns off his computer.
That information is always going to be there when he returns to our website so we could use it to store
like the user's name to send a greeting or maybe the preferences for filters.
So local storage could be very, very useful.
Just one thing that we must be careful is to never store sensitive information like passwords or confidential
data because local storage is not very safe.
But for simple information like I've just mentioned, it's completely fine.
So data in local storage is stored as key value pairs and the value must always be in string format.
So in order to understand better how it works, let's go to Visual Studio Code.
So we can do some examples, so let's get started with how we create a key value pair to be stored in
local storage, as I've mentioned, local storage is part of the window object.
So we would start like this.
So window, not local storage.
Then the name of the method to create a new entry is set item.
And here we are going to pass two arguments, one for the key, which in this case, let's use name.
And one for the value, so I'm just going to use my name.
As we already know, when we work with the window object, we can admit it if we want so we could ride
it like this.
So again, as local storage is something unique, we won't think that this is a variable or a function
that won't be any confusion.
So if you want, you can just omit the window object because like, this is going to be cleaner.
All right.
So let's do this.
I'm going to set this new entry.
Now I'm going back to the browser.
I'm going to refresh the page, and now it seems that nothing happens, however, if we call the local
storage, we can access all those keys as if this was a regular object, which it is.
So we can do like local storage, that name.
And if we do this, as you can see, we were able to get the information we want.
And the cool thing about this, let me just copy the URL.
I'm going to open a new tab, I'm just going to close this and I'm going to go to a different website.
All right, I'm visiting another website and I'm going to be back there.
If we open the inspector again, let me go to the consul.
Let's see if that information is still there.
So, as you can see, that information is still there.
So if the user gives you the name once, you can use it every time to say like, hi, Yvonne, how are
you?
Or something like this, we could also use to do more useful stuff like remembering settings for filters
or maybe locations.
I'm going to show you an example in a moment about a weather forecast website that stores the recent
locations in local storage.
Before we do that, let me show you where you can find all the information that websites are starring
in your local storage.
So if you go here to the application tab, as you can see, we have local storage and session storage.
We're going to talk about session storage in a moment.
But first, here we have local storage and it's always going to be the first on the list.
Sometimes you will see more.
So you should always go to the first one here.
And as you can see, we have the key and value that we just set.
So every time we return to this website, there could be a greeting calling us by the name.
If you want to clean it as a user, you can just go here and just select clear all and then this is
going to be refreshed.
This is the only way of doing this or clearing the browsing history.
If you clear it all, it's also going to delete everything in the local storage.
So that's the only way.
If you never do this, this information will never be erased from here.
So now let me refresh the page.
If I refresh the page, this is going to be here again because we are creating this every time we load
the page.
And another way of removing something from the local storage.
Let's do this directly from the console.
So if in your code, for some reason you want to erase something from the local storage, you can just
do remove item.
And then you just pass the key you want to remove.
So, again, if we go to application, we can see that it's here and if we run this remove item method,
we can go back there and now the value is not here anymore.
And I'm going to show you a situation in which you would want to clear the local storage from the code.
Let me refresh the page so we have it back.
And now let's move to session storage, which is pretty much the same thing.
But the difference is that in session storage, we are not going to keep that information forever.
So we have local storage.
If the user doesn't delete it, it's always going to be there.
But in session storage is just for that session.
So if I close the tab or I close the Web browser or I turn off my computer, that information is going
to be gone.
And sometimes we just want that information for the session.
So if that's the case, instead of using local storage, you can just use session storage.
So let's try something here just for this example.
And the methods we are going to use for session storage are exactly the same.
So to start a new one, you can just type session storage set item.
Let's say we are starting the preferences or preference.
So let's say I prefer beach over mountains.
Let's do it like this.
Now, I just said it, if I go to the application tab again, as you can see, we have the local storage
with that key value and we have the session storage.
Now, before I refresh the page, let me go back to the code, I'm going to create a comment on this
so we make sure that we are not setting it again.
So now I'm just going to refresh the page so as you can see, I still have it on local storage, even
though I'm not setting it again.
And I also have it here because I didn't close the browser or anything.
But if I copy this.
And I'm going to open a new window.
I'm going to open it right here.
Let's go back there to the application folder.
So here we have the local storage, we still have the key value pair here and for the session storage,
this is not here anymore.
So if I close the browser or even just a tab, then the information was stored in session.
Storage is going to be erased.
Now, one important thing to remember is that when you storing something on local storage, the value
must always be a string.
So let's say instead of just starting the name, we want to store an object.
So let's go back to the console and I'm going to create a variable for a person.
So here I have one.
So now we have an object with two properties, name and age, and now I'm going to try to get started
on local storage.
So let's call the local storage dot.
Set item, I'm going to create a new key called person, and I'm going to send this object.
Let's do this now when we go back to the application tab.
As you can see, we just lost all the information because now what we see here is just an object.
If we try to get it back, so local storage dog person, as you can see, there's nothing else we can
do with this.
Now, this is just a string with object object written inside.
We can do anything with it.
So how do we do this?
Should we create one key for the name and one key for the age?
Well, if it's a really simple thing you're trying to do with just two properties, then maybe creating
one for the name and one for the age should work.
But if you're storing more information, then maybe it's a good idea to keep it inside the object.
So how do you turn an object into a string?
Well, the answer is Jason.
So before sending our object to the local storage.
So let me go back there.
I'm going to erase it.
And now, instead of sending the object, I'm going to use that method called String Shefi from the
Jason Library.
So now I'm going to transform that object into Jason and I'm going to send it to the local start.
All right, going back here now, as you can see now, at least we can still read it and when we get
it back, all we need to do is just converting it back into an object so then we can use that information.
So now, if I would like to get it back, I can just do.
Local storage that.
Burson.
And instead of just doing this, I'm going to do Jason.
Don't pass.
And if I do this now, I have an object which I can work with its properties so I could work with the
name or with the age.
So this is how you store arrays or objects inside local storage.
In the next video, we're going to do a simple practical example together.
This is going to be very cool to use local storage to do this.
But before we go ahead, I just want to show you a quick example.
Let me go to Why Adon A. which is a weather forecast that I normally visit and we go to any place here.
So as you can see, when I go inside a weather forecast page, I have this list of relevant places.
And this is cool because these were the places that I've searched recently.
But how do they do this?
If I'm not logged in?
They don't know who I am.
Where are they starting this?
Well, they are storing this in my Web browser.
So every time I go to a different place, let's try.
Portal.
Now, as you can see here now, Porto has been added, and if I go out of the website and then when
I come back here, I will still see the same relevant places.
So if I go to the inspector, to the application tab, as you can see, there's an entry in the local
storage.
This is the key name.
This probably means something in Norwegian because this is a Norwegian website.
So this is the key and this is the value.
Since this is just age HTML, there's no programming with this, they just get this information and
then just throw it inside this element.
It's OK to just store this age HTML.
So I just wanted to show you how useful it can be to store information in the local storage.
So let me close this.
And that was all that I had to say for this lesson.
So in the next video, we're going to do this practical example where we type the name.
And then the next time we go back here, instead of showing the form, it's just going to show a greeting.
So as this video is getting a bit too long in the next video, we're going to solve this.
So I'll see you then.