1
00:00:01,510 --> 00:00:07,330
This lesson, we are going to be looking at local storage, so first of all, let's go into our application

2
00:00:07,540 --> 00:00:10,760
and select a countdown date to countdown to you.

3
00:00:11,080 --> 00:00:19,120
So now it's 20 days, 22 hours, 46 minutes, 44, 43 seconds till that selected time date.

4
00:00:21,450 --> 00:00:28,290
But what happens if I refresh my page, I lose my current settings, so I want to store this in local

5
00:00:28,290 --> 00:00:35,280
storage, and luckily for us, JavaScript has such a feature called local storage that allows us to

6
00:00:35,460 --> 00:00:39,800
send and store content into the local storage of the document.

7
00:00:40,200 --> 00:00:46,380
So the document's origin, there's an example here on how it works so you can set a value in local storage,

8
00:00:46,570 --> 00:00:52,470
you can get a value from local storage, you can remove an item from Rockpool storage and you can clear

9
00:00:52,470 --> 00:00:53,790
all of your local storage.

10
00:00:54,090 --> 00:00:58,970
So now we're going to be looking at local storage and setting content within the local storage.

11
00:00:59,160 --> 00:01:04,020
So try that out and let's open up our Ed and add it into our application.

12
00:01:04,600 --> 00:01:11,190
So we want to check to see if there is a value in the local storage whenever we load the page.

13
00:01:11,460 --> 00:01:17,840
And that's going to give us a value that we can look for, look at and we can utilize within our code.

14
00:01:18,240 --> 00:01:27,390
So let's check to see if there's a perceived value and using our local storage object and get item.

15
00:01:27,400 --> 00:01:31,990
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.

16
00:01:32,920 --> 00:01:35,840
Property value for countdown.

17
00:01:36,370 --> 00:01:41,180
And if there isn't anything, then we're going to set the value of saved value to false.

18
00:01:41,860 --> 00:01:45,840
Next, let's check to see if received value exists.

19
00:01:46,150 --> 00:01:49,330
So if there was a value, it's going to have that value in there.

20
00:01:49,450 --> 00:01:51,910
Otherwise it's going to be false and we can skip over it.

21
00:01:52,270 --> 00:01:57,820
So we know that we can start the clock with whatever value is that we've saved there.

22
00:01:58,030 --> 00:02:02,230
So we're saving that into the value and we can start the clock.

23
00:02:02,380 --> 00:02:06,970
So that means that this temp value is what we need to store in the local storage.

24
00:02:07,150 --> 00:02:10,570
And we can do that down here where we're starting the clock.

25
00:02:11,530 --> 00:02:18,670
So on change, where we're building out this use local storage, the local storage object and then set

26
00:02:18,820 --> 00:02:19,260
item.

27
00:02:20,050 --> 00:02:23,800
And now we're going to set a value for count down.

28
00:02:24,870 --> 00:02:31,800
And this is the same property value that we're trying to get the item from, and we need to set whatever

29
00:02:31,800 --> 00:02:34,280
that value is, so we're going to set that value.

30
00:02:34,950 --> 00:02:37,760
And actually this is not going to be temp.

31
00:02:37,770 --> 00:02:39,150
It's going to be saved values.

32
00:02:39,150 --> 00:02:43,450
So we're setting the clock instead of what temp we're going to use that save value that we saved.

33
00:02:43,920 --> 00:02:45,090
So let's refresh that.

34
00:02:46,350 --> 00:02:51,570
Set a new value, set it refreshed again, and now you see, when I'm hitting this refresh and I am

35
00:02:51,570 --> 00:02:52,330
hitting refresh.

36
00:02:52,710 --> 00:02:53,940
Nothing is changing.

37
00:02:53,970 --> 00:02:59,220
We still got our countdown and it's still operational because we're actually saving it within local

38
00:02:59,220 --> 00:03:02,070
storage and that's how you can save it within the local storage.

39
00:03:02,250 --> 00:03:08,160
And one thing that you might have noticed is that if I set a time here and if I refresh it, my input

40
00:03:08,160 --> 00:03:10,430
field loses that input value.

41
00:03:10,740 --> 00:03:18,840
So we need to update that value and let's add that value to the input so we can call it input value

42
00:03:18,840 --> 00:03:20,250
for now as a temporary value.

43
00:03:20,490 --> 00:03:25,140
And we need to take a new object with whatever the value of temp is.

44
00:03:25,530 --> 00:03:29,250
And for now we can consider log that out and put value.

45
00:03:29,530 --> 00:03:31,500
It's going to be whatever perceived value is.

46
00:03:31,500 --> 00:03:32,200
So let's refresh.

47
00:03:32,400 --> 00:03:36,900
So you can see that on outputting, that saved value and now it's just a matter of updating the input

48
00:03:36,900 --> 00:03:37,200
field.

49
00:03:38,160 --> 00:03:43,770
So that we can do because we've already got it within an object format called end date, so taken that

50
00:03:43,770 --> 00:03:47,280
and and this is where we can update that input value.

51
00:03:47,550 --> 00:03:48,720
So let's refresh.

52
00:03:49,860 --> 00:03:55,140
And so now whatever value we're storing and even though we're refreshing, we see that it's getting

53
00:03:55,140 --> 00:03:57,740
updated within that value of the end date.

54
00:03:58,140 --> 00:04:00,660
And you have to make sure that you use value as date.

55
00:04:00,790 --> 00:04:02,310
You could also do value.

56
00:04:02,590 --> 00:04:06,300
But what's going to happen is when you do value, it's not going to output it property.

57
00:04:06,630 --> 00:04:13,800
So the way to update the date, the input field with type date is to use value as date.

58
00:04:13,920 --> 00:04:19,290
And that's how you can convert a date object into a usable format that can be used within that input

59
00:04:19,290 --> 00:04:19,570
field.

60
00:04:19,860 --> 00:04:25,740
So go ahead and add this into your project and store your values to local storage so you're never going

61
00:04:25,740 --> 00:04:28,680
to lose your countdown time and you can always refresh it.

62
00:04:28,860 --> 00:04:32,460
And not to worry that you can go on to other pages, come back in.

63
00:04:32,460 --> 00:04:34,020
Your countdown is still there.

64
00:04:34,320 --> 00:04:36,680
So go ahead and add this into your project as well.