1
00:00:00,210 --> 00:00:05,880
In this lesson, we're going to be looking at local storage, so local storage gives us an opportunity

2
00:00:05,880 --> 00:00:13,080
to store a value in the user's browser and we can retrieve that information so we can set the value

3
00:00:13,200 --> 00:00:14,850
as well as get the item.

4
00:00:14,970 --> 00:00:20,010
And then we'll also remove items and clear all the items that are stored in the local storage.

5
00:00:20,220 --> 00:00:25,950
There's an example of how to set an item over here, how to get the item removed, the item and also

6
00:00:25,950 --> 00:00:29,320
clear more information, of course, Mozilla Developer Network.

7
00:00:29,580 --> 00:00:36,000
So it's a read-only local storage allows us, the user, to store an object for the document's origin

8
00:00:36,000 --> 00:00:37,260
and store it.

9
00:00:37,500 --> 00:00:42,960
So similar to what you would do with cookies, where you're setting the item, you give it a name and

10
00:00:42,960 --> 00:00:43,480
a value.

11
00:00:43,770 --> 00:00:49,680
So this is just one string value that you can set as well as the name that you're going to be retrieving

12
00:00:49,680 --> 00:00:49,860
it.

13
00:00:50,040 --> 00:00:53,330
And then you look into the local storage to get the item.

14
00:00:53,490 --> 00:00:58,930
So specifying the name of the value that you set and then also retrieving back that value.

15
00:00:59,100 --> 00:01:02,160
You can remove it, you can set it, you can get it.

16
00:01:02,340 --> 00:01:06,630
And as well, if you want to clear all the items from the local storage, all you would have to do is

17
00:01:06,630 --> 00:01:08,160
specify the clear method.

18
00:01:09,330 --> 00:01:16,200
So there is, of course, a challenge for this lesson, and that's to store a value in local storage

19
00:01:16,380 --> 00:01:22,060
and then increment it every time the user refreshes the page or comes back to the page.

20
00:01:22,350 --> 00:01:23,040
So let's try that.

21
00:01:23,160 --> 00:01:26,060
You can pause the video here and I'll walk you through the solution.

22
00:01:26,700 --> 00:01:31,860
And I also kept the object from the last lesson where we were stirring a thing as string.

23
00:01:31,860 --> 00:01:36,610
A fire is also something I want to quickly show you in this lesson as well.

24
00:01:37,290 --> 00:01:43,740
So we want to do is we want to check to see if a value is available within the local storage and the

25
00:01:43,740 --> 00:01:48,030
way that we set and check in local storage as we get item.

26
00:01:48,780 --> 00:01:53,930
So specifying the item via its name that we're referencing it.

27
00:01:54,210 --> 00:02:00,680
So if it is available, then what we want to do is we want to get that value.

28
00:02:01,710 --> 00:02:06,290
So using a variable that we're setting and then this is the variable that we're going to use to increment.

29
00:02:06,870 --> 00:02:10,560
So getting that item and we've given a name of NUM.

30
00:02:12,520 --> 00:02:20,980
We can convert it into a number format and JavaScript would do this anyway, but just to be exact and

31
00:02:20,980 --> 00:02:26,320
also practice what we've learned in the earlier lessons, let's convert it into a number and then taking

32
00:02:26,320 --> 00:02:31,510
that value, we're going to increment up by one and then going back to local storage.

33
00:02:31,690 --> 00:02:38,060
This time we're setting that item so setting numb to be equal to whatever the value of counters.

34
00:02:38,350 --> 00:02:40,740
So that's going to update the value in the local store.

35
00:02:41,110 --> 00:02:49,140
And if it doesn't exist, then we want to set it is taking local storage and using set item.

36
00:02:49,450 --> 00:02:53,440
We're going to set a value of NUM and starting value.

37
00:02:53,440 --> 00:02:54,600
We can start it out at one.

38
00:02:55,570 --> 00:03:03,150
And lastly, let's use console and local storage and once again get item.

39
00:03:03,160 --> 00:03:09,760
So we're getting that item that we've got give it at NUM in order to reference it so you can see that

40
00:03:09,760 --> 00:03:15,340
we've got it as to whenever I refresh it, because it's obviously it's because it's a live preview.

41
00:03:15,350 --> 00:03:16,330
So it's refreshing.

42
00:03:16,510 --> 00:03:21,400
So every time I refresh the page, our account is essentially increasing because we've got that value

43
00:03:21,400 --> 00:03:21,810
in there.

44
00:03:22,270 --> 00:03:25,490
We can also do a local storage and clear.

45
00:03:26,170 --> 00:03:28,600
So this will clear out the local storage.

46
00:03:29,170 --> 00:03:34,120
And now when we start, you see that we're sending it back to one, two, three, four, five, six,

47
00:03:34,120 --> 00:03:35,200
seven, eight, nine, 10.

48
00:03:35,350 --> 00:03:39,520
And it's always going to be sitting within the local storage of the user's browser.

49
00:03:40,660 --> 00:03:44,800
And under the application tab, you can see local storage.

50
00:03:44,980 --> 00:03:47,950
So you can see the information, the content that's stored in local storage.

51
00:03:48,070 --> 00:03:51,760
And there's our number of 14 when we refresh it goes to 15.

52
00:03:52,040 --> 00:03:53,350
So that's within chrome.

53
00:03:53,350 --> 00:03:56,110
If you go on your application, you can see that value being stored.

54
00:03:57,250 --> 00:03:59,820
And also, I did want to indicate one other thing.

55
00:04:00,070 --> 00:04:05,380
So in case you do want to store something as local storage, so if you want to store this object, you

56
00:04:05,380 --> 00:04:08,530
can utilize what we did last time where we.

57
00:04:09,570 --> 00:04:18,720
Set that value and we take the object and use JSON, String Afie and then String Afie the object, and

58
00:04:18,720 --> 00:04:24,280
now we can use local storage and we can set that value in local storage.

59
00:04:24,870 --> 00:04:32,870
So this is a great way and this is a great example of how you can use that object in the local storage

60
00:04:33,090 --> 00:04:34,070
to store it as temp.

61
00:04:34,740 --> 00:04:40,160
And when I refresh, you can see now I've got that object there and this is within a string format.

62
00:04:40,410 --> 00:04:47,000
So if I want to pull that back out and use it, I just call it an object to take local storage, get

63
00:04:47,010 --> 00:04:55,320
item and we're getting back the object and then wrap it with JSON pass to pass the string back into

64
00:04:55,320 --> 00:05:01,770
a usable object format and I'll console log out that an object value so that you can see that now it's

65
00:05:01,770 --> 00:05:05,600
back in an object format and this is actually coming from the local storage.

66
00:05:05,850 --> 00:05:08,040
So that's going to give us that option to use that.

67
00:05:08,230 --> 00:05:13,830
So within the storage is stored as a string and we can use it again as an object, manipulate it and

68
00:05:13,830 --> 00:05:18,990
of course, save it back into the the local storage after we've completed using.

69
00:05:19,290 --> 00:05:20,130
So go ahead and try all the.