In this lesson, we're going to be looking at local storage, so local storage gives us an opportunity
to store a value in the user's browser and we can retrieve that information so we can set the value
as well as get the item.
And then we'll also remove items and clear all the items that are stored in the local storage.
There's an example of how to set an item over here, how to get the item removed, the item and also
clear more information, of course, Mozilla Developer Network.
So it's a read-only local storage allows us, the user, to store an object for the document's origin
and store it.
So similar to what you would do with cookies, where you're setting the item, you give it a name and
a value.
So this is just one string value that you can set as well as the name that you're going to be retrieving
it.
And then you look into the local storage to get the item.
So specifying the name of the value that you set and then also retrieving back that value.
You can remove it, you can set it, you can get it.
And as well, if you want to clear all the items from the local storage, all you would have to do is
specify the clear method.
So there is, of course, a challenge for this lesson, and that's to store a value in local storage
and then increment it every time the user refreshes the page or comes back to the page.
So let's try that.
You can pause the video here and I'll walk you through the solution.
And I also kept the object from the last lesson where we were stirring a thing as string.
A fire is also something I want to quickly show you in this lesson as well.
So we want to do is we want to check to see if a value is available within the local storage and the
way that we set and check in local storage as we get item.
So specifying the item via its name that we're referencing it.
So if it is available, then what we want to do is we want to get that value.
So using a variable that we're setting and then this is the variable that we're going to use to increment.
So getting that item and we've given a name of NUM.
We can convert it into a number format and JavaScript would do this anyway, but just to be exact and
also practice what we've learned in the earlier lessons, let's convert it into a number and then taking
that value, we're going to increment up by one and then going back to local storage.
This time we're setting that item so setting numb to be equal to whatever the value of counters.
So that's going to update the value in the local store.
And if it doesn't exist, then we want to set it is taking local storage and using set item.
We're going to set a value of NUM and starting value.
We can start it out at one.
And lastly, let's use console and local storage and once again get item.
So we're getting that item that we've got give it at NUM in order to reference it so you can see that
we've got it as to whenever I refresh it, because it's obviously it's because it's a live preview.
So it's refreshing.
So every time I refresh the page, our account is essentially increasing because we've got that value
in there.
We can also do a local storage and clear.
So this will clear out the local storage.
And now when we start, you see that we're sending it back to one, two, three, four, five, six,
seven, eight, nine, 10.
And it's always going to be sitting within the local storage of the user's browser.
And under the application tab, you can see local storage.
So you can see the information, the content that's stored in local storage.
And there's our number of 14 when we refresh it goes to 15.
So that's within chrome.
If you go on your application, you can see that value being stored.
And also, I did want to indicate one other thing.
So in case you do want to store something as local storage, so if you want to store this object, you
can utilize what we did last time where we.
Set that value and we take the object and use JSON, String Afie and then String Afie the object, and
now we can use local storage and we can set that value in local storage.
So this is a great way and this is a great example of how you can use that object in the local storage
to store it as temp.
And when I refresh, you can see now I've got that object there and this is within a string format.
So if I want to pull that back out and use it, I just call it an object to take local storage, get
item and we're getting back the object and then wrap it with JSON pass to pass the string back into
a usable object format and I'll console log out that an object value so that you can see that now it's
back in an object format and this is actually coming from the local storage.
So that's going to give us that option to use that.
So within the storage is stored as a string and we can use it again as an object, manipulate it and
of course, save it back into the the local storage after we've completed using.
So go ahead and try all the.