1
00:00:02,710 --> 00:00:06,580
Now to add an item, we in the end need to repeat this process here.

2
00:00:06,580 --> 00:00:08,500
So I'll copy that code here,

3
00:00:08,680 --> 00:00:10,530
move it into my event listener,

4
00:00:10,750 --> 00:00:17,220
the database in the object stores will be initialized when this code is executed and therefore

5
00:00:17,220 --> 00:00:22,450
now here, I again establish a connection to the product object store and I add a new product,

6
00:00:22,450 --> 00:00:28,460
so here a second product for let's say a higher price with the same tax.

7
00:00:28,840 --> 00:00:30,460
That should almost work,

8
00:00:30,460 --> 00:00:32,820
one problem we'll have is the database.

9
00:00:32,830 --> 00:00:36,030
This is a variable we define here in this function,

10
00:00:36,040 --> 00:00:40,710
so it's scoped to this function, to make it available outside of there, we can define the globally

11
00:00:40,720 --> 00:00:46,630
let db and then just assign a value here to it so that this is available in the whole script

12
00:00:46,630 --> 00:00:48,970
and therefore now here, we can access it as well,

13
00:00:48,970 --> 00:00:55,330
we could check if db is set or if it's not set, so that you don't try to work with it if it doesn't

14
00:00:55,330 --> 00:00:55,960
exist yet,

15
00:00:55,960 --> 00:01:01,660
this is an extra check we could add here. And with that if we save that and reload and you click store,

16
00:01:02,710 --> 00:01:05,520
you'll see nothing changes. Now

17
00:01:05,530 --> 00:01:08,890
our problem here is that we set db in 

18
00:01:08,890 --> 00:01:09,440
onUpgradeNeeded,

19
00:01:09,460 --> 00:01:14,260
this however doesn't always run. If we have a database where the version number did not change, this will

20
00:01:14,260 --> 00:01:16,090
not rerun, this essentially just runs

21
00:01:16,090 --> 00:01:21,670
if the version changes, onUpgradeNeeded will run whenever the database is created for the first time

22
00:01:21,760 --> 00:01:24,190
or when the version number changes thereafter.

23
00:01:24,190 --> 00:01:28,060
Now of course we could just change the version number here and this function would run again but then

24
00:01:28,060 --> 00:01:32,050
we would try to recreate this object store which already exists,

25
00:01:32,170 --> 00:01:36,390
so you should not use this version number to kind of try to make your other code work,

26
00:01:36,400 --> 00:01:40,450
you should use it if you really change the internal structure of the database, so that's not what we

27
00:01:40,450 --> 00:01:41,860
want to do here.

28
00:01:41,860 --> 00:01:48,870
Instead what we need to do here is copy that code and add an onSuccess handler here

29
00:01:51,650 --> 00:01:58,430
which will run whenever this is opened or created and then get rid of all the non-database assigning

30
00:01:58,430 --> 00:02:00,980
code here so that all we do is this,

31
00:02:01,010 --> 00:02:05,670
now we got some code here which will run whenever the script reruns, whenever the database connection

32
00:02:05,670 --> 00:02:08,360
is opened and will give us access to the database,

33
00:02:08,360 --> 00:02:12,620
so then the database variable will be set and we're able to work with it.

34
00:02:12,630 --> 00:02:17,760
So now if we save that, go to the application tab here, reload and click store,

35
00:02:17,870 --> 00:02:23,400
you might need to click that refresh button but then you'll see your new data here.

36
00:02:23,400 --> 00:02:25,650
Now that's how you can store data, for retrieving

37
00:02:25,650 --> 00:02:31,640
we can go to the retrieve button function here and there you need access to the object store, so we

38
00:02:31,640 --> 00:02:32,840
can reuse this code

39
00:02:32,870 --> 00:02:39,210
and of course you could also put this in some helper function therefore and on that store object here,

40
00:02:39,700 --> 00:02:45,950
you can now call a get function and enter the key name of the item you want to retrieve, for example

41
00:02:45,950 --> 00:02:47,320
p2.

42
00:02:47,390 --> 00:02:51,740
Now this will not give you the item like this, instead it gives you a request object where you again

43
00:02:51,740 --> 00:02:55,870
can add an onError and onSuccess handler,

44
00:02:56,060 --> 00:03:00,690
this is just how this API works.

45
00:03:00,710 --> 00:03:06,850
Now here in this function, we also don't get the item as an argument unfortunately, it is what it is,

46
00:03:06,890 --> 00:03:14,040
instead we can now get the retrieved item on the request object which was returned by get here and there,

47
00:03:14,060 --> 00:03:19,020
we'll have a result property which should be the item that was retrieved.

48
00:03:19,100 --> 00:03:23,390
So with that if we save this, reload, go to the console and click retrieve,

49
00:03:23,390 --> 00:03:30,460
indeed I did retrieve the item with key p2. So some aspects which can be confusing for sure,

50
00:03:30,680 --> 00:03:37,040
it is the API IndexedDB offers, though because it's a bit clunky with all these handler assignments

51
00:03:37,040 --> 00:03:37,620
here,

52
00:03:37,700 --> 00:03:39,980
there actually are third-party libraries,

53
00:03:39,980 --> 00:03:44,000
most importantly idb.js which is linked on this lecture

54
00:03:44,000 --> 00:03:48,590
so you'll find a link attached that make working with IndexedDB much easier,

55
00:03:48,590 --> 00:03:52,950
that promisify all these features and so on. So a link to that is attached,

56
00:03:52,970 --> 00:03:59,030
in addition you also attached find a link to an MDN document which dives way deeper into this base API

57
00:03:59,360 --> 00:04:04,100
and explores what else you can do there besides this basic storage and retrieval.