1
00:00:02,520 --> 00:00:04,800
So let's rename this

2
00:00:04,810 --> 00:00:09,630
file now to local storage so that we still have it for reference but we can create a new app.js

3
00:00:09,730 --> 00:00:12,740
file because now we'll dive in to cookies.

4
00:00:12,740 --> 00:00:21,030
Now cookies are these special storage in a sense because they are attached to outgoing HttpRequests and

5
00:00:21,030 --> 00:00:25,980
that can be helpful depending on which kind of application you're building, of course your server needs

6
00:00:25,980 --> 00:00:32,640
to be prepared to do something with your cookies, otherwise them being added to outgoing requests adds

7
00:00:32,670 --> 00:00:33,960
no extra value,

8
00:00:33,960 --> 00:00:37,580
it won't be a problem but it also won't give you any special benefits,

9
00:00:37,620 --> 00:00:43,290
you need some server side code which also reads the cookies so that this actually is an advantage and

10
00:00:43,290 --> 00:00:48,670
that of course in turn depends on which use case you're handling, which application you are building.

11
00:00:48,840 --> 00:00:53,430
Nonetheless, here I want to focus on how we work with cookies from the client side.

12
00:00:53,430 --> 00:00:58,170
If you want to learn all about server side by the way, my Node.js course is a great next step, just

13
00:00:58,170 --> 00:00:59,680
to throw that in right here

14
00:00:59,880 --> 00:01:05,150
but let's have a look at what we can do with cookies here in the browser. We access the cookies with 

15
00:01:05,160 --> 00:01:06,480
documents.cookie,

16
00:01:06,480 --> 00:01:11,130
this sounds like we access a single cookie but actually it gives us access to all cookie data stored.

17
00:01:11,940 --> 00:01:16,980
To start simple, let's simply console log document.cookie and see what we got in there.

18
00:01:16,980 --> 00:01:23,700
If I run this, if I now reload here, you see I get nothing,

19
00:01:23,700 --> 00:01:30,660
we got nothing stored here on this page which makes sense because which kind of cookies should be

20
00:01:30,660 --> 00:01:35,760
stored for this page, it's brand new, it's not connected to a server even so there can't be any cookies

21
00:01:35,760 --> 00:01:41,940
which the servers set because servers can set cookies with headers on their responses, so it makes

22
00:01:41,940 --> 00:01:44,970
sense that we have no data on our cookie here.

23
00:01:45,240 --> 00:01:46,390
We can change this though

24
00:01:46,530 --> 00:01:53,490
and for that let me grab this code from local storage where we get our two buttons and replace

25
00:01:53,520 --> 00:02:01,340
all the code with that and then also make sure to add these listeners here, all the listener code,

26
00:02:01,380 --> 00:02:06,270
copy that over into app.js but of course clear what we have in these listeners

27
00:02:06,300 --> 00:02:08,330
so that we start from scratch again and

28
00:02:08,400 --> 00:02:10,410
now let's start with the store button.

29
00:02:10,410 --> 00:02:15,030
We can access document.cookie and what you can do here and that might sound really strange but you can

30
00:02:15,030 --> 00:02:22,840
set it equal to a string and this will add a new entry to the cookie, so it will not override or clear

31
00:02:22,920 --> 00:02:24,330
the existing cookie data,

32
00:02:24,330 --> 00:02:30,930
it will add something to it. Now that can be strange because it looks like you're assigning a new value but

33
00:02:30,930 --> 00:02:37,680
no indeed it will add something not replace, it will only replace a cookie that already has the same key

34
00:02:37,680 --> 00:02:41,040
you're about to add but step-by-step. Under the hood,

35
00:02:41,040 --> 00:02:46,890
this simply uses a setter function which triggers when you assign a new value and that setter function

36
00:02:46,890 --> 00:02:51,950
will then add this as a new key-value pair to the existing pairs instead of replace the existing ones.

37
00:02:52,440 --> 00:02:53,720
So how do we add an entry here now?

38
00:02:53,720 --> 00:02:59,890
Let's say we again want to store some userId which we got, u123,

39
00:03:00,000 --> 00:03:05,730
well then we can add this here by picking a key, userId or uid, then an equals sign without any

40
00:03:05,730 --> 00:03:07,770
whitespace just like this

41
00:03:07,770 --> 00:03:09,540
and then your value.

42
00:03:09,540 --> 00:03:13,280
Now here, I'll use a template literal so that I can simply inject this,

43
00:03:13,350 --> 00:03:18,690
of course you could also just concatenate this to a string. So here I'll inject userId as a value

44
00:03:18,690 --> 00:03:23,550
for this cookie ID or this cookie key here.

45
00:03:23,610 --> 00:03:30,380
So if you save this and you go back and click on store, let's check out the application tab and what

46
00:03:30,390 --> 00:03:35,300
you'll notice there under cookies is that you don't see anything there,

47
00:03:35,340 --> 00:03:41,490
now let me press store again multiple times, nothing shows up there. Now reason for that is unlike local

48
00:03:41,490 --> 00:03:45,350
and session storage, cookies really only are available

49
00:03:45,390 --> 00:03:49,250
if your web page is getting served with a real server.

50
00:03:49,260 --> 00:03:55,770
Now I covered this in the modules section and in the tooling section, so you probably are aware of why

51
00:03:55,770 --> 00:04:02,160
we need such a server, the file protocol simply just doesn't simulate real circumstances under which

52
00:04:02,160 --> 00:04:04,170
our page would be served.

53
00:04:04,170 --> 00:04:10,980
Now we did already install a server in these modules and that was the serve package which you can find

54
00:04:10,980 --> 00:04:17,850
by googling for serve.js. You install it with npm which also is a tool you get by installing Node.js

55
00:04:17,860 --> 00:04:23,580
which you also need for this server to work, so you need to visit nodejs.org, download node, walk

56
00:04:23,580 --> 00:04:30,240
through that installer, thereafter install serve with npm install -g serve and once you did all

57
00:04:30,270 --> 00:04:37,210
that in your project with the terminal built into the IDE here to automatically have a terminal or

58
00:04:37,210 --> 00:04:42,870
a command prompt which is navigated into your project folder automatically, you can just run serve in

59
00:04:42,870 --> 00:04:49,020
there and what this will do is it will serve the index.html file in that folder automatically

60
00:04:49,020 --> 00:04:53,440
when you visit the address that it's being shown here, localhost:5000

61
00:04:53,460 --> 00:04:55,540
in my case here.

62
00:04:55,620 --> 00:05:02,570
So now if we load localhost:5000 instead of the page through the file protocol, if we revisit

63
00:05:02,570 --> 00:05:08,950
the cookies here, I see one dummy cookie which is probably set by some other tool, some extension

64
00:05:08,960 --> 00:05:13,310
but if I now click store here and I reload,

65
00:05:13,370 --> 00:05:16,400
you see the userId show up there.

66
00:05:16,430 --> 00:05:22,560
So now we also can access cookies through Javascript and to read the value,

67
00:05:22,580 --> 00:05:29,690
we now just have to go to our retrieve click listener and we can console log document.cookie and

68
00:05:29,690 --> 00:05:32,140
it will output what's inside of our cookies.

69
00:05:32,150 --> 00:05:37,540
So if we do that, save that, reload and go to the console in the dev tools,

70
00:05:37,550 --> 00:05:40,180
now you see the cookie I set here.

71
00:05:40,190 --> 00:05:45,750
Now what about the other cookie which was set there if we go back to application? This cookie has

72
00:05:45,750 --> 00:05:46,710
a special flag,

73
00:05:46,710 --> 00:05:55,020
this flag here, the HTTP only flag and that means this cookie is only accessible by the server, not accessible

74
00:05:55,110 --> 00:05:58,930
from browser side Javascript, an extra security mechanism.

75
00:05:58,950 --> 00:06:04,290
This is why with browser side Javascript when we print all cookies, we only see this key-value pair.