1
00:00:02,260 --> 00:00:06,730
So let's move on to IndexedDB and for that, I'll rename app.js to cookies

2
00:00:09,470 --> 00:00:13,000
and create a new app.js file in which we'll now work.

3
00:00:13,040 --> 00:00:19,950
Copy all the code from cookies though but get rid of the cookies specific code and the functions,

4
00:00:19,960 --> 00:00:22,880
I just want to have the listeners and the functions here

5
00:00:23,320 --> 00:00:25,310
and now let's work with IndexedDB.

6
00:00:25,330 --> 00:00:31,480
Now IndexedDB is the most complex storage and therefore just as before, you find an attached resource

7
00:00:31,480 --> 00:00:34,090
that allows you to dive way deeper, here

8
00:00:34,120 --> 00:00:40,100
I just want to explore the basic functionality. Now the basic functionality is that you work with an

9
00:00:40,450 --> 00:00:45,050
in-browser database and for that you can leave that development server running,

10
00:00:45,070 --> 00:00:48,250
you can also use the file protocol for IndexedDB though,

11
00:00:48,280 --> 00:00:50,330
here I'll do it with the server.

12
00:00:50,470 --> 00:00:57,070
So the first step with IndexedDB is that you create a database or open a connection to an existing

13
00:00:57,070 --> 00:00:58,200
one.

14
00:00:58,240 --> 00:01:04,720
For that, we can call IndexedDB which exists on window and which we therefore can just access like

15
00:01:04,720 --> 00:01:07,630
this and there, call open.

16
00:01:07,630 --> 00:01:11,750
Now to open, you pass the name of your database, the name is totally up to you

17
00:01:11,770 --> 00:01:14,290
but of course it shouldn't exist yet as a database,

18
00:01:14,290 --> 00:01:22,120
for example storage dummy. Second argument can be passed, can be the version of the database, you can use

19
00:01:22,120 --> 00:01:26,770
that to keep track of different versions, update a database, change it and so on,

20
00:01:26,800 --> 00:01:30,340
not something we'll explore here, so we can just set the version one.

21
00:01:30,360 --> 00:01:34,620
Now when this runs for the first time and the database doesn't exist yet, it will create it

22
00:01:34,720 --> 00:01:37,450
otherwise it will just open a connection,

23
00:01:37,660 --> 00:01:39,510
so that's the first step.

24
00:01:39,550 --> 00:01:43,210
Now this is not promise based or anything like that unfortunately,

25
00:01:43,240 --> 00:01:48,070
so we can't call then and get the database connection object as an argument,

26
00:01:48,100 --> 00:01:51,200
that's unfortunately not how it works.

27
00:01:51,220 --> 00:01:58,080
Instead this open method here returns a so-called request, a db request as I'll call it.

28
00:01:58,540 --> 00:02:05,680
Now on db request, you can add two event handlers, two event listeners, either with add event listener or for

29
00:02:05,680 --> 00:02:13,990
best cross browser support, with onSuccess which should point at a function and then also additionally

30
00:02:14,080 --> 00:02:21,010
onError which should point at a function. Now in both functions, you get access to an event object and

31
00:02:21,010 --> 00:02:27,580
now you can interact with that. Now in onError, I'll just console log error and not worry too much about

32
00:02:27,580 --> 00:02:32,740
it right now, of course in your application where you really depend on IndexedDB, you should provide some

33
00:02:32,740 --> 00:02:36,780
fallback logic but here it's fine like this, in onSuccess

34
00:02:36,790 --> 00:02:43,910
however, I want to continue. There, we get access to the database to which we connected or which was just

35
00:02:43,910 --> 00:02:52,850
created through that event object, event.target.result is a field you can access here, a property

36
00:02:52,850 --> 00:02:58,630
you can access and that will hold access to the database that was created.

37
00:02:58,880 --> 00:03:01,660
Now we can configure that database,

38
00:03:01,970 --> 00:03:04,640
remember this fires when this open request succeeded

39
00:03:04,640 --> 00:03:07,840
so now we can configure that once this happened.

40
00:03:07,850 --> 00:03:14,030
Now I mentioned that IndexedDB would work with tables and records like databases you know from servers,

41
00:03:14,320 --> 00:03:16,640
now actually the terminology is a bit different,

42
00:03:16,640 --> 00:03:22,850
it's object stores which you work with, a bit like tables, you can have multiple object stores and each

43
00:03:22,940 --> 00:03:29,150
object store can store multiple objects I guess but it's a bit like tables and records in the

44
00:03:29,150 --> 00:03:30,130
end.

45
00:03:30,170 --> 00:03:37,700
Now with the database you get access to, you can use it to create an object store by calling create object

46
00:03:37,700 --> 00:03:39,420
store like this.

47
00:03:39,530 --> 00:03:43,010
Now this is a function that takes a couple of parameters,

48
00:03:43,010 --> 00:03:44,960
first one is the name of the object store,

49
00:03:45,050 --> 00:03:46,550
for example products.

50
00:03:46,550 --> 00:03:51,230
Let's say we're building an app where we want to store some products here on the client side, though

51
00:03:51,290 --> 00:03:53,150
keep in mind what I said earlier,

52
00:03:53,150 --> 00:03:59,960
business critical or security relevant information as well as data that has to be shared with other clients

53
00:04:00,230 --> 00:04:01,580
should not be stored here,

54
00:04:01,580 --> 00:04:07,580
so it's really just data which can get lost and which we just need to enhance the user experience,

55
00:04:07,580 --> 00:04:10,150
so let's say we're storing a couple of products. Now.

56
00:04:10,250 --> 00:04:17,390
every object store needs one key, one property that exists on every stored object by which this object

57
00:04:17,420 --> 00:04:19,190
can be identified.

58
00:04:19,190 --> 00:04:24,890
You configure this in a second argument you pass to create object store, there you pass in a configuration

59
00:04:24,890 --> 00:04:32,070
object which has to have a key path property, where you set up that single key which every item has

60
00:04:32,090 --> 00:04:33,410
by which it can be identified,

61
00:04:33,410 --> 00:04:37,330
let's say for a product, that's an ID field, it's up to you,

62
00:04:37,370 --> 00:04:39,820
it just has to be a field which later exists

63
00:04:39,830 --> 00:04:47,150
once you start adding data. This returns access to the object store, so we can store access to that object

64
00:04:47,150 --> 00:04:49,390
store in a new constant,

65
00:04:49,400 --> 00:04:56,560
now we can initialize this object store. We might want to add some initial data here and of course that

66
00:04:56,590 --> 00:04:59,920
now really depends on your application, whether that's the case or not,

67
00:04:59,920 --> 00:05:01,170
so that we can see something,

68
00:05:01,170 --> 00:05:02,530
I will do it here.

69
00:05:02,740 --> 00:05:08,610
We can use the object store object for that and there, we'll have a transaction property on which we have

70
00:05:08,610 --> 00:05:16,060
an onComplete listener. This points at a function where we also get an event object which we don't need

71
00:05:16,060 --> 00:05:23,770
here though in which we now can execute code. Now onComplete will trigger once the object store creation

72
00:05:23,770 --> 00:05:24,700
finished in the end,

73
00:05:25,060 --> 00:05:31,140
so it's now in here where we can interact with the database and this object store. Now to store new data,

74
00:05:31,150 --> 00:05:36,640
we reach out to the database because you could store it in any object store and there, you also have a

75
00:05:36,640 --> 00:05:44,020
transaction method though now which you execute like such, so you execute a transaction method, which

76
00:05:44,020 --> 00:05:45,000
takes two arguments.

77
00:05:45,040 --> 00:05:47,240
The first argument is the name of your object store,

78
00:05:47,260 --> 00:05:52,360
so the name we set up here, in my case products. So I'll point at products here,

79
00:05:52,390 --> 00:06:01,910
second argument is the mode under which you want to access this store and that could be read or like

80
00:06:01,910 --> 00:06:02,980
in my case, read

81
00:06:02,970 --> 00:06:03,320
write,

82
00:06:03,340 --> 00:06:09,580
I want to be able to write as well. Now this should open up a connection to that object store, on the resulting

83
00:06:09,670 --> 00:06:10,140
object,

84
00:06:10,150 --> 00:06:15,250
you can now call object store as a method and pass in that name again.

85
00:06:15,250 --> 00:06:20,440
You need to call that object store method because you could pass in multiple object store names to the transaction

86
00:06:20,650 --> 00:06:25,990
and then this would allow you to select a single object store and this will now give you direct access

87
00:06:25,990 --> 00:06:27,250
to that object store

88
00:06:27,250 --> 00:06:29,610
we're trying to establish a connection to.

89
00:06:30,010 --> 00:06:36,820
You can store that object store access here in a constant, products store for example

90
00:06:36,850 --> 00:06:38,500
and now we can work with that.

91
00:06:38,560 --> 00:06:44,860
Here we can use product store to call add and add a new item

92
00:06:44,930 --> 00:06:50,370
and now that item should be a Javascript object which needs to have that key here,

93
00:06:50,390 --> 00:06:55,700
so in my case it needs to have an ID property, could be p1 for product one and then it can have

94
00:06:55,730 --> 00:06:57,080
any fields you want,

95
00:06:57,080 --> 00:07:08,830
for example a title for the product, a first product, maybe a price which can be a number, maybe a tax array

96
00:07:08,920 --> 00:07:16,350
where we have expensive and luxury as tax for example.

97
00:07:16,620 --> 00:07:17,930
Any object can be added,

98
00:07:17,940 --> 00:07:20,750
you just need to have your key path here,

99
00:07:20,760 --> 00:07:23,160
you need to respect that in the object

100
00:07:23,160 --> 00:07:25,420
and with that, this should be added.

101
00:07:25,440 --> 00:07:26,610
That was a lot of talking.

102
00:07:26,610 --> 00:07:35,250
Now let's save that and let's reload this page and we get an error. Now this error tells us that the

103
00:07:35,250 --> 00:07:38,390
database is not running a version change transaction.

104
00:07:38,430 --> 00:07:41,560
Now the thing is we defined this onSuccess callback here,

105
00:07:41,580 --> 00:07:47,380
this onSuccess function which would fire when the database is successfully created.

106
00:07:47,450 --> 00:07:51,210
It turns out that we actually interact with the database,

107
00:07:51,210 --> 00:07:55,040
you need a different handler which is onUpgradeNeeded,

108
00:07:55,170 --> 00:08:00,540
so if we save this now with this changed and we reload, this error goes away.

109
00:08:00,680 --> 00:08:05,180
Let's now visit the application tab and there under IndexedDB,

110
00:08:05,210 --> 00:08:10,460
you should find that storage dummy database.

111
00:08:10,460 --> 00:08:17,300
Now it says zero objects stores though, so you might want to delete that and then simply reload and it should

112
00:08:17,300 --> 00:08:24,690
then create it in the correct way with the products object store and there if we expand this, we can see

113
00:08:25,050 --> 00:08:30,470
our key but we also see the value which was stored for that key which is this Javascript object and

114
00:08:30,470 --> 00:08:30,970
therefore

115
00:08:31,050 --> 00:08:36,390
this is more structured data stored in there without the need to encode it with JSON or anything like

116
00:08:36,390 --> 00:08:36,780
that

117
00:08:36,840 --> 00:08:43,840
and of course you can store multiple such objects with ease here, all identified through their key. So that

118
00:08:43,840 --> 00:08:48,730
was a lot of work and it already shows that this is more complex to work with but also more powerful

119
00:08:48,730 --> 00:08:49,210
therefore,

120
00:08:49,870 --> 00:08:52,870
now let's say we want to store something when we click the store button.