1
00:00:06,650 --> 00:00:14,760
Hey, everyone, in this video, we're going to talk about local storage, which is a property of the

2
00:00:14,760 --> 00:00:19,430
window object that can store data in the user's computer.

3
00:00:19,740 --> 00:00:26,640
So by doing this, we can remember information to use every time the user visits our website.

4
00:00:26,880 --> 00:00:33,510
So it doesn't matter if the user closes the current tab or even the browser, it doesn't matter if the

5
00:00:33,510 --> 00:00:35,370
user turns off his computer.

6
00:00:35,760 --> 00:00:43,770
That information is always going to be there when he returns to our website so we could use it to store

7
00:00:43,770 --> 00:00:49,800
like the user's name to send a greeting or maybe the preferences for filters.

8
00:00:50,100 --> 00:00:53,730
So local storage could be very, very useful.

9
00:00:54,090 --> 00:01:03,840
Just one thing that we must be careful is to never store sensitive information like passwords or confidential

10
00:01:03,840 --> 00:01:07,430
data because local storage is not very safe.

11
00:01:08,260 --> 00:01:13,160
But for simple information like I've just mentioned, it's completely fine.

12
00:01:13,870 --> 00:01:22,130
So data in local storage is stored as key value pairs and the value must always be in string format.

13
00:01:22,450 --> 00:01:27,010
So in order to understand better how it works, let's go to Visual Studio Code.

14
00:01:27,890 --> 00:01:36,560
So we can do some examples, so let's get started with how we create a key value pair to be stored in

15
00:01:36,560 --> 00:01:42,260
local storage, as I've mentioned, local storage is part of the window object.

16
00:01:42,440 --> 00:01:44,270
So we would start like this.

17
00:01:44,390 --> 00:01:48,140
So window, not local storage.

18
00:01:50,060 --> 00:01:57,140
Then the name of the method to create a new entry is set item.

19
00:01:58,080 --> 00:02:05,640
And here we are going to pass two arguments, one for the key, which in this case, let's use name.

20
00:02:06,860 --> 00:02:10,910
And one for the value, so I'm just going to use my name.

21
00:02:11,810 --> 00:02:19,340
As we already know, when we work with the window object, we can admit it if we want so we could ride

22
00:02:19,340 --> 00:02:20,140
it like this.

23
00:02:20,570 --> 00:02:27,980
So again, as local storage is something unique, we won't think that this is a variable or a function

24
00:02:28,100 --> 00:02:29,750
that won't be any confusion.

25
00:02:29,760 --> 00:02:36,650
So if you want, you can just omit the window object because like, this is going to be cleaner.

26
00:02:37,010 --> 00:02:37,430
All right.

27
00:02:37,430 --> 00:02:38,590
So let's do this.

28
00:02:38,600 --> 00:02:42,890
I'm going to set this new entry.

29
00:02:43,400 --> 00:02:45,500
Now I'm going back to the browser.

30
00:02:46,610 --> 00:02:54,080
I'm going to refresh the page, and now it seems that nothing happens, however, if we call the local

31
00:02:54,080 --> 00:03:00,410
storage, we can access all those keys as if this was a regular object, which it is.

32
00:03:00,710 --> 00:03:04,790
So we can do like local storage, that name.

33
00:03:05,330 --> 00:03:10,010
And if we do this, as you can see, we were able to get the information we want.

34
00:03:10,490 --> 00:03:13,850
And the cool thing about this, let me just copy the URL.

35
00:03:15,070 --> 00:03:21,370
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.

36
00:03:25,080 --> 00:03:28,830
All right, I'm visiting another website and I'm going to be back there.

37
00:03:30,750 --> 00:03:34,560
If we open the inspector again, let me go to the consul.

38
00:03:35,640 --> 00:03:38,340
Let's see if that information is still there.

39
00:03:38,370 --> 00:03:41,450
So, as you can see, that information is still there.

40
00:03:41,760 --> 00:03:49,320
So if the user gives you the name once, you can use it every time to say like, hi, Yvonne, how are

41
00:03:49,320 --> 00:03:49,640
you?

42
00:03:49,650 --> 00:03:57,450
Or something like this, we could also use to do more useful stuff like remembering settings for filters

43
00:03:57,450 --> 00:03:59,270
or maybe locations.

44
00:03:59,280 --> 00:04:06,780
I'm going to show you an example in a moment about a weather forecast website that stores the recent

45
00:04:06,780 --> 00:04:09,420
locations in local storage.

46
00:04:09,420 --> 00:04:15,930
Before we do that, let me show you where you can find all the information that websites are starring

47
00:04:15,930 --> 00:04:17,240
in your local storage.

48
00:04:17,580 --> 00:04:23,940
So if you go here to the application tab, as you can see, we have local storage and session storage.

49
00:04:24,390 --> 00:04:27,120
We're going to talk about session storage in a moment.

50
00:04:27,480 --> 00:04:34,080
But first, here we have local storage and it's always going to be the first on the list.

51
00:04:34,200 --> 00:04:35,940
Sometimes you will see more.

52
00:04:36,030 --> 00:04:38,430
So you should always go to the first one here.

53
00:04:38,440 --> 00:04:43,200
And as you can see, we have the key and value that we just set.

54
00:04:43,530 --> 00:04:50,130
So every time we return to this website, there could be a greeting calling us by the name.

55
00:04:50,460 --> 00:04:57,930
If you want to clean it as a user, you can just go here and just select clear all and then this is

56
00:04:57,930 --> 00:04:59,360
going to be refreshed.

57
00:04:59,370 --> 00:05:03,840
This is the only way of doing this or clearing the browsing history.

58
00:05:03,840 --> 00:05:09,660
If you clear it all, it's also going to delete everything in the local storage.

59
00:05:09,660 --> 00:05:10,770
So that's the only way.

60
00:05:10,770 --> 00:05:15,300
If you never do this, this information will never be erased from here.

61
00:05:15,480 --> 00:05:17,460
So now let me refresh the page.

62
00:05:17,460 --> 00:05:24,720
If I refresh the page, this is going to be here again because we are creating this every time we load

63
00:05:24,720 --> 00:05:25,200
the page.

64
00:05:25,410 --> 00:05:29,730
And another way of removing something from the local storage.

65
00:05:29,910 --> 00:05:32,380
Let's do this directly from the console.

66
00:05:33,270 --> 00:05:39,750
So if in your code, for some reason you want to erase something from the local storage, you can just

67
00:05:39,750 --> 00:05:41,220
do remove item.

68
00:05:45,500 --> 00:05:49,400
And then you just pass the key you want to remove.

69
00:05:50,420 --> 00:05:58,400
So, again, if we go to application, we can see that it's here and if we run this remove item method,

70
00:05:58,760 --> 00:06:02,230
we can go back there and now the value is not here anymore.

71
00:06:02,630 --> 00:06:09,380
And I'm going to show you a situation in which you would want to clear the local storage from the code.

72
00:06:09,830 --> 00:06:12,620
Let me refresh the page so we have it back.

73
00:06:12,980 --> 00:06:17,870
And now let's move to session storage, which is pretty much the same thing.

74
00:06:18,110 --> 00:06:23,930
But the difference is that in session storage, we are not going to keep that information forever.

75
00:06:24,110 --> 00:06:25,490
So we have local storage.

76
00:06:25,730 --> 00:06:29,930
If the user doesn't delete it, it's always going to be there.

77
00:06:30,080 --> 00:06:33,870
But in session storage is just for that session.

78
00:06:34,070 --> 00:06:40,580
So if I close the tab or I close the Web browser or I turn off my computer, that information is going

79
00:06:40,580 --> 00:06:41,390
to be gone.

80
00:06:41,570 --> 00:06:45,380
And sometimes we just want that information for the session.

81
00:06:45,410 --> 00:06:51,020
So if that's the case, instead of using local storage, you can just use session storage.

82
00:06:51,320 --> 00:06:54,800
So let's try something here just for this example.

83
00:06:54,800 --> 00:06:59,610
And the methods we are going to use for session storage are exactly the same.

84
00:06:59,870 --> 00:07:07,460
So to start a new one, you can just type session storage set item.

85
00:07:09,840 --> 00:07:14,700
Let's say we are starting the preferences or preference.

86
00:07:15,900 --> 00:07:18,840
So let's say I prefer beach over mountains.

87
00:07:21,870 --> 00:07:23,060
Let's do it like this.

88
00:07:24,050 --> 00:07:29,990
Now, I just said it, if I go to the application tab again, as you can see, we have the local storage

89
00:07:30,260 --> 00:07:34,550
with that key value and we have the session storage.

90
00:07:35,500 --> 00:07:42,490
Now, before I refresh the page, let me go back to the code, I'm going to create a comment on this

91
00:07:42,490 --> 00:07:45,340
so we make sure that we are not setting it again.

92
00:07:47,120 --> 00:07:53,390
So now I'm just going to refresh the page so as you can see, I still have it on local storage, even

93
00:07:53,390 --> 00:07:54,950
though I'm not setting it again.

94
00:07:55,200 --> 00:07:59,150
And I also have it here because I didn't close the browser or anything.

95
00:07:59,480 --> 00:08:01,430
But if I copy this.

96
00:08:02,390 --> 00:08:05,380
And I'm going to open a new window.

97
00:08:08,720 --> 00:08:10,460
I'm going to open it right here.

98
00:08:11,600 --> 00:08:14,300
Let's go back there to the application folder.

99
00:08:16,900 --> 00:08:23,800
So here we have the local storage, we still have the key value pair here and for the session storage,

100
00:08:23,980 --> 00:08:25,910
this is not here anymore.

101
00:08:26,110 --> 00:08:32,080
So if I close the browser or even just a tab, then the information was stored in session.

102
00:08:32,080 --> 00:08:34,300
Storage is going to be erased.

103
00:08:34,540 --> 00:08:41,140
Now, one important thing to remember is that when you storing something on local storage, the value

104
00:08:41,140 --> 00:08:43,200
must always be a string.

105
00:08:43,480 --> 00:08:49,360
So let's say instead of just starting the name, we want to store an object.

106
00:08:49,510 --> 00:08:55,720
So let's go back to the console and I'm going to create a variable for a person.

107
00:08:57,680 --> 00:08:59,000
So here I have one.

108
00:09:00,220 --> 00:09:07,510
So now we have an object with two properties, name and age, and now I'm going to try to get started

109
00:09:07,540 --> 00:09:09,250
on local storage.

110
00:09:09,250 --> 00:09:14,500
So let's call the local storage dot.

111
00:09:15,590 --> 00:09:22,790
Set item, I'm going to create a new key called person, and I'm going to send this object.

112
00:09:23,390 --> 00:09:27,800
Let's do this now when we go back to the application tab.

113
00:09:28,840 --> 00:09:36,490
As you can see, we just lost all the information because now what we see here is just an object.

114
00:09:40,630 --> 00:09:48,250
If we try to get it back, so local storage dog person, as you can see, there's nothing else we can

115
00:09:48,250 --> 00:09:48,960
do with this.

116
00:09:49,210 --> 00:09:54,760
Now, this is just a string with object object written inside.

117
00:09:55,000 --> 00:09:56,980
We can do anything with it.

118
00:09:57,400 --> 00:09:58,900
So how do we do this?

119
00:09:59,320 --> 00:10:03,710
Should we create one key for the name and one key for the age?

120
00:10:03,970 --> 00:10:09,910
Well, if it's a really simple thing you're trying to do with just two properties, then maybe creating

121
00:10:09,910 --> 00:10:12,820
one for the name and one for the age should work.

122
00:10:13,180 --> 00:10:19,580
But if you're storing more information, then maybe it's a good idea to keep it inside the object.

123
00:10:19,900 --> 00:10:23,470
So how do you turn an object into a string?

124
00:10:23,590 --> 00:10:25,750
Well, the answer is Jason.

125
00:10:26,290 --> 00:10:30,960
So before sending our object to the local storage.

126
00:10:30,970 --> 00:10:32,590
So let me go back there.

127
00:10:32,710 --> 00:10:34,150
I'm going to erase it.

128
00:10:40,560 --> 00:10:48,600
And now, instead of sending the object, I'm going to use that method called String Shefi from the

129
00:10:48,600 --> 00:10:49,980
Jason Library.

130
00:10:52,010 --> 00:10:58,460
So now I'm going to transform that object into Jason and I'm going to send it to the local start.

131
00:10:59,560 --> 00:11:06,970
All right, going back here now, as you can see now, at least we can still read it and when we get

132
00:11:06,970 --> 00:11:13,750
it back, all we need to do is just converting it back into an object so then we can use that information.

133
00:11:14,440 --> 00:11:17,770
So now, if I would like to get it back, I can just do.

134
00:11:20,750 --> 00:11:23,120
Local storage that.

135
00:11:24,650 --> 00:11:25,280
Burson.

136
00:11:26,660 --> 00:11:29,870
And instead of just doing this, I'm going to do Jason.

137
00:11:31,000 --> 00:11:32,530
Don't pass.

138
00:11:40,050 --> 00:11:47,610
And if I do this now, I have an object which I can work with its properties so I could work with the

139
00:11:47,610 --> 00:11:50,280
name or with the age.

140
00:11:50,520 --> 00:11:56,880
So this is how you store arrays or objects inside local storage.

141
00:11:57,240 --> 00:12:02,280
In the next video, we're going to do a simple practical example together.

142
00:12:02,310 --> 00:12:06,510
This is going to be very cool to use local storage to do this.

143
00:12:06,960 --> 00:12:11,070
But before we go ahead, I just want to show you a quick example.

144
00:12:11,340 --> 00:12:19,540
Let me go to Why Adon A. which is a weather forecast that I normally visit and we go to any place here.

145
00:12:19,980 --> 00:12:26,580
So as you can see, when I go inside a weather forecast page, I have this list of relevant places.

146
00:12:26,730 --> 00:12:31,470
And this is cool because these were the places that I've searched recently.

147
00:12:31,830 --> 00:12:33,060
But how do they do this?

148
00:12:33,060 --> 00:12:34,350
If I'm not logged in?

149
00:12:34,620 --> 00:12:35,910
They don't know who I am.

150
00:12:36,300 --> 00:12:37,950
Where are they starting this?

151
00:12:37,980 --> 00:12:41,010
Well, they are storing this in my Web browser.

152
00:12:41,220 --> 00:12:45,330
So every time I go to a different place, let's try.

153
00:12:47,020 --> 00:12:47,650
Portal.

154
00:12:50,870 --> 00:12:57,290
Now, as you can see here now, Porto has been added, and if I go out of the website and then when

155
00:12:57,290 --> 00:13:01,300
I come back here, I will still see the same relevant places.

156
00:13:01,550 --> 00:13:10,400
So if I go to the inspector, to the application tab, as you can see, there's an entry in the local

157
00:13:10,400 --> 00:13:11,010
storage.

158
00:13:11,030 --> 00:13:12,250
This is the key name.

159
00:13:12,260 --> 00:13:16,660
This probably means something in Norwegian because this is a Norwegian website.

160
00:13:16,910 --> 00:13:19,580
So this is the key and this is the value.

161
00:13:20,700 --> 00:13:27,300
Since this is just age HTML, there's no programming with this, they just get this information and

162
00:13:27,300 --> 00:13:29,250
then just throw it inside this element.

163
00:13:29,490 --> 00:13:32,940
It's OK to just store this age HTML.

164
00:13:33,340 --> 00:13:39,150
So I just wanted to show you how useful it can be to store information in the local storage.

165
00:13:39,690 --> 00:13:40,890
So let me close this.

166
00:13:41,940 --> 00:13:45,130
And that was all that I had to say for this lesson.

167
00:13:45,150 --> 00:13:51,540
So in the next video, we're going to do this practical example where we type the name.

168
00:13:51,540 --> 00:13:57,860
And then the next time we go back here, instead of showing the form, it's just going to show a greeting.

169
00:13:58,530 --> 00:14:03,490
So as this video is getting a bit too long in the next video, we're going to solve this.

170
00:14:03,510 --> 00:14:04,440
So I'll see you then.