1
00:00:02,120 --> 00:00:03,830
So that were the basics about cookies,

2
00:00:03,830 --> 00:00:05,120
let's dive in a bit deeper,

3
00:00:05,150 --> 00:00:06,960
let's say we want to store more,

4
00:00:06,980 --> 00:00:13,130
so here when we store data, I don't just set uid but I also want to store some user data. With local

5
00:00:13,130 --> 00:00:13,640
storage,

6
00:00:13,640 --> 00:00:22,130
we created a user with a name, with an age in an object and then I would basically just, to transfer what

7
00:00:22,130 --> 00:00:28,760
we did with local storage, add a user a key here and then use JSON.stringify on user or on the

8
00:00:28,760 --> 00:00:34,790
person you created here to convert this to JSON which is a string and hopefully store it in the cookie.

9
00:00:34,790 --> 00:00:36,550
Let's see whether that works.

10
00:00:36,680 --> 00:00:38,200
Let's save that,

11
00:00:38,270 --> 00:00:46,610
go back and reload, click store and click retrieve and indeed, this worked, our user data is encoded as

12
00:00:46,610 --> 00:00:48,810
a string and stored in the cookie.

13
00:00:48,830 --> 00:00:55,370
Now one thing you probably see there is not just that this works though but that we don't have such

14
00:00:55,370 --> 00:01:02,080
a nice retrieval API as we had it with local storage. There to get an item,

15
00:01:02,190 --> 00:01:05,890
we had the get item method. Now with cookies,

16
00:01:05,910 --> 00:01:07,690
it's an all or nothing thing,

17
00:01:07,740 --> 00:01:12,410
when I access document.cookie I got no get method or anything like that,

18
00:01:12,450 --> 00:01:13,080
I just

19
00:01:13,080 --> 00:01:19,890
do get all my key-value pairs separated with a comma. In the end what we get here is one long string

20
00:01:20,160 --> 00:01:22,550
which is also why on document.cookie,

21
00:01:22,680 --> 00:01:29,310
you can use all these string methods and hence for example, you could also split this on this semicolon

22
00:01:29,640 --> 00:01:35,190
and if you would do that and you reload and retrieve, you see now at least you have the key-value pairs

23
00:01:35,310 --> 00:01:40,860
split into separate items here in an array, though please be aware that there is an extra whitespace

24
00:01:40,860 --> 00:01:47,490
in front of the user item because there was a whitespace in the cookie string before.

25
00:01:47,490 --> 00:01:56,180
So how could you now retrieve a single item let's say? Well to get rid of the excess whitespace, you could

26
00:01:56,960 --> 00:02:06,020
store your cookie data in a constant where we use document.cookie.split on the semicolon, then

27
00:02:06,020 --> 00:02:11,540
on cookie data we can call map, a method which is available on every array and cookie data is an array

28
00:02:12,320 --> 00:02:18,290
which requires a function which is executed on every item in the array and every item in the array is

29
00:02:18,290 --> 00:02:19,500
just a string, there

30
00:02:19,520 --> 00:02:25,730
I want to get rid of excess whitespace and I can do so by returning i.trim, trim is a method you

31
00:02:25,730 --> 00:02:31,460
can call on strings to remove excess whitespace at the beginning or end and with that if I then console

32
00:02:31,460 --> 00:02:37,850
log the result of this which we could store in a data constant, if we console log data here and save

33
00:02:37,850 --> 00:02:46,430
that, you'll see that if we now reload here and click retrieve, we got an array without that extra whitespace.

34
00:02:46,710 --> 00:02:51,770
Well and now if you would want to find a specific value, you just would have to get the value on the

35
00:02:51,770 --> 00:02:58,760
right side of the equal sign, so for example for the user, you can access the second item in data because

36
00:02:58,940 --> 00:03:07,680
it is the second item in our data array and then on that item, you can of course split that on the equal

37
00:03:07,680 --> 00:03:10,440
sign and then you will have two items,

38
00:03:10,470 --> 00:03:15,600
one is the key, the first element in the resulting array is the key, the second element in the resulting

39
00:03:15,600 --> 00:03:17,120
array is the value.

40
00:03:17,130 --> 00:03:22,440
So on the result of that split call which is that array with two elements, you can now access the second

41
00:03:22,440 --> 00:03:23,830
element to get the value,

42
00:03:23,850 --> 00:03:27,200
so this would be the user value here in this case.

43
00:03:27,240 --> 00:03:32,080
So if I save that and reload and click retrieve, that's the user value.

44
00:03:32,160 --> 00:03:37,430
So as I mentioned, a bit clunky, definitely not as nice to work with as local storage,

45
00:03:37,440 --> 00:03:44,370
so what are the advantages of cookies then? The advantages of cookies are that you can set them to expire

46
00:03:44,700 --> 00:03:48,480
and that you can also send them to a server with requests.

47
00:03:48,510 --> 00:03:51,210
Now since we have no backend server we communicate with,

48
00:03:51,210 --> 00:03:55,400
let's here focus on the expiration which is quite interesting.

49
00:03:55,440 --> 00:04:00,660
Now it is very simple, if you don't set any expiration date on a cookie, it should expire when your session

50
00:04:00,660 --> 00:04:01,140
expires,

51
00:04:01,140 --> 00:04:06,780
so when you close the entire browser, though finally it's up to the browser when it wants to delete

52
00:04:06,780 --> 00:04:07,650
the cookie.

53
00:04:07,650 --> 00:04:12,780
Also keep in mind that just as with local storage, the user can always delete all cookies, either through

54
00:04:12,780 --> 00:04:18,810
the dev tools and the application tab here or simply with browser preferences where you can also clear

55
00:04:18,810 --> 00:04:23,040
cookies and you can clear cookies no matter if they have an expiration date or not

56
00:04:23,040 --> 00:04:24,630
but back to that expiration date.

57
00:04:24,690 --> 00:04:29,060
If we would want to say that our userId should not expire with the end of the session,

58
00:04:29,160 --> 00:04:38,460
then we can add one of two flags, max age or expires. To add the max age flag, you add a semicolon after

59
00:04:38,460 --> 00:04:48,420
your key-value pair and then whitespace max-age and set this equal to a maximum age. Now the maximum

60
00:04:48,450 --> 00:04:51,490
age should be expressed in seconds,

61
00:04:51,600 --> 00:04:57,330
so you could say this cookie should only be valid for 50 seconds or for 2 seconds.

62
00:04:57,330 --> 00:05:04,230
If I do that and I save this, if I reload and I click store, if I go to the application you see under cookies,

63
00:05:04,260 --> 00:05:07,840
this uid here has an expiration date.

64
00:05:07,890 --> 00:05:09,720
If we expand that, we see,

65
00:05:12,850 --> 00:05:18,840
if I double click in there, we can see the full date and that basically is in two seconds after

66
00:05:18,840 --> 00:05:20,000
it was issued.

67
00:05:20,190 --> 00:05:26,250
Therefore now already if I click retrieve, this should not work and I do indeed get an error because

68
00:05:26,250 --> 00:05:31,740
my one cookie was removed and therefore when I try to call it split on the second cookie, this of course

69
00:05:31,740 --> 00:05:34,830
failed because we only have one cookie by now,

70
00:05:34,830 --> 00:05:39,990
it did expire after two seconds, hence if I reload and I click store and retrieve quickly, it works or

71
00:05:39,990 --> 00:05:44,580
at least it doesn't fail, it doesn't work as before but I'll come back to that in a second.

72
00:05:44,820 --> 00:05:45,960
So that's max-age,

73
00:05:45,960 --> 00:05:51,320
the alternative to that is that you set expires to a value and expires

74
00:05:51,330 --> 00:05:53,180
now takes a date.

75
00:05:53,400 --> 00:05:58,560
Now that date needs to have a certain format and attached you find a link to MDN where you see examples,

76
00:05:58,620 --> 00:06:01,330
where you also see that format for example,

77
00:06:01,440 --> 00:06:06,930
so that would be an alternative. If you know it's not one minute or ten days or whatever it is, it is

78
00:06:06,930 --> 00:06:07,870
a fixed date,

79
00:06:07,890 --> 00:06:09,670
then you could use expires.

80
00:06:09,870 --> 00:06:14,910
Now I'll go back to max-age and actually set this to let's say 360 seconds,

81
00:06:14,910 --> 00:06:16,730
so to three minutes.

82
00:06:16,740 --> 00:06:21,140
Now you might have noticed that we have a problem when we retrieve the data.

83
00:06:21,180 --> 00:06:27,120
The problem is if I store data and I then retrieve it, here I print my userId

84
00:06:27,360 --> 00:06:29,550
Now actually, it's now what I want to print,

85
00:06:29,550 --> 00:06:33,500
I want to print the user, not the userId with this code.

86
00:06:33,500 --> 00:06:35,040
Now why is this happening?

87
00:06:35,040 --> 00:06:36,660
Well let's simply print

88
00:06:39,130 --> 00:06:41,600
document.cookie here to get an idea.

89
00:06:41,680 --> 00:06:46,490
So if I save this, reload, you don't need to store it again, it should still be stored but you can always

90
00:06:46,490 --> 00:06:49,880
click stored to refresh it and if you then click retrieve, you see

91
00:06:50,000 --> 00:06:52,220
this is how it was stored here.

92
00:06:52,220 --> 00:06:55,130
Now why is it stored like this here?

93
00:06:55,130 --> 00:07:02,570
Well of course because my cookie expired in the past, user did not expire and if we then set user again

94
00:07:02,570 --> 00:07:07,460
to a value which it already had, it's not recreated, the old one is not deleted and the new one is added,

95
00:07:07,750 --> 00:07:08,250
instead

96
00:07:08,450 --> 00:07:12,950
it's just kept, it's not touched and your new cookie is added.

97
00:07:13,190 --> 00:07:17,060
So since uid expired in the past but user did never expire,

98
00:07:17,060 --> 00:07:22,490
user is still around and uid was readded but of course in the second position and that simply has

99
00:07:22,490 --> 00:07:26,880
the implication that retrieving data just by index alone is not a good idea,

100
00:07:26,930 --> 00:07:32,720
what you should do instead is you should search for the key name and you can do that on strings, for example

101
00:07:32,720 --> 00:07:37,490
with includes where you can check for a given name. Attached you also find a link to MDN where

102
00:07:37,490 --> 00:07:41,990
you find more patterns on how you can parse data and get data out of a cookie.

103
00:07:42,050 --> 00:07:44,400
Please also note that max-age,

104
00:07:44,460 --> 00:07:50,690
so this extra flag which I set and the same is true for all flags is not part of the cookie output

105
00:07:50,690 --> 00:07:51,320
you get

106
00:07:51,410 --> 00:07:57,470
so you don't have to worry about that when parsing your cookie at least and that's it for cookies.

107
00:07:57,500 --> 00:07:59,530
Again, I did provide a couple of resources

108
00:07:59,540 --> 00:08:01,610
you can use to dive deeper, for now

109
00:08:01,610 --> 00:08:03,900
that's all I want to explore here though

110
00:08:03,940 --> 00:08:07,760
and with that, let's move on to the last part, to IndexedDB