This lesson, we are going to be looking at local storage, so first of all, let's go into our application
and select a countdown date to countdown to you.
So now it's 20 days, 22 hours, 46 minutes, 44, 43 seconds till that selected time date.
But what happens if I refresh my page, I lose my current settings, so I want to store this in local
storage, and luckily for us, JavaScript has such a feature called local storage that allows us to
send and store content into the local storage of the document.
So the document's origin, there's an example here on how it works so you can set a value in local storage,
you can get a value from local storage, you can remove an item from Rockpool storage and you can clear
all of your local storage.
So now we're going to be looking at local storage and setting content within the local storage.
So try that out and let's open up our Ed and add it into our application.
So we want to check to see if there is a value in the local storage whenever we load the page.
And that's going to give us a value that we can look for, look at and we can utilize within our code.
So let's check to see if there's a perceived value and using our local storage object and get item.
So we're going to look for an item that we're going to get from it and we're going to look for other.
Property value for countdown.
And if there isn't anything, then we're going to set the value of saved value to false.
Next, let's check to see if received value exists.
So if there was a value, it's going to have that value in there.
Otherwise it's going to be false and we can skip over it.
So we know that we can start the clock with whatever value is that we've saved there.
So we're saving that into the value and we can start the clock.
So that means that this temp value is what we need to store in the local storage.
And we can do that down here where we're starting the clock.
So on change, where we're building out this use local storage, the local storage object and then set
item.
And now we're going to set a value for count down.
And this is the same property value that we're trying to get the item from, and we need to set whatever
that value is, so we're going to set that value.
And actually this is not going to be temp.
It's going to be saved values.
So we're setting the clock instead of what temp we're going to use that save value that we saved.
So let's refresh that.
Set a new value, set it refreshed again, and now you see, when I'm hitting this refresh and I am
hitting refresh.
Nothing is changing.
We still got our countdown and it's still operational because we're actually saving it within local
storage and that's how you can save it within the local storage.
And one thing that you might have noticed is that if I set a time here and if I refresh it, my input
field loses that input value.
So we need to update that value and let's add that value to the input so we can call it input value
for now as a temporary value.
And we need to take a new object with whatever the value of temp is.
And for now we can consider log that out and put value.
It's going to be whatever perceived value is.
So let's refresh.
So you can see that on outputting, that saved value and now it's just a matter of updating the input
field.
So that we can do because we've already got it within an object format called end date, so taken that
and and this is where we can update that input value.
So let's refresh.
And so now whatever value we're storing and even though we're refreshing, we see that it's getting
updated within that value of the end date.
And you have to make sure that you use value as date.
You could also do value.
But what's going to happen is when you do value, it's not going to output it property.
So the way to update the date, the input field with type date is to use value as date.
And that's how you can convert a date object into a usable format that can be used within that input
field.
So go ahead and add this into your project and store your values to local storage so you're never going
to lose your countdown time and you can always refresh it.
And not to worry that you can go on to other pages, come back in.
Your countdown is still there.
So go ahead and add this into your project as well.