Okay, in this chapter you're going to get a crash course in IndexedDB.
So hold on tight.
Let's get through this as quickly as possible, and hopefully in one piece.
I'm going to start by going to the browser and opening idb-test.
This is just a blank page with a script tag.
This script is in public, JS, idb-test, index.js.
All it contains at the moment is an import for
the IDB library we saw before.
So okay then, let's create a database.
We can see from the library's code that the function signature is .open, and
then the name of the database,
the version, then a callback to set the database up.
So let's do that.
I'm going to call idb.open, then name the DB test-db,
version one, and pass in my setup callback.
This function will be called if the browser hasn't
heard about this database before.
Or if the version it knows about is less than this number here.
This function gets a special upgradeDb parameter
which we used to define the database.
To ensure the database integrity, this is the only place you can create and
remove objects stores and indexes.
The API for upgradeDb is in the library.
But it's mostly just a mirror of the real IndexedDB API, except for
a few minor differences which we'll cover.
The docs tell me createObjectStore is the same as IDB.
So MDN can give us the full story.
And there's the full detail of the API.
So I'll create an object store called keyVal.
Because we haven't told it otherwise, this store has a key that's separate to
the data, which is what we want for a keyValStore.
I'm going to add some content here, too.
We can see from the library docs that an object store has
these methods which behave the same as IDB, except they return a promise.
This is the thing that makes the library way more usable than plain IDB.
So I want to put an item into the store.
So, let's look at the docs for that.
MDN shows as .put takes an item and a key, and returns a request.
These request objects are the thing that makes IDB really difficult to deal with.
So whenever IDB would return a request, the library returns a promise.
And yes, the signature here is value key rather than key value.
Which is a real gotcha, but you'll see why it's like that later on.
In fact, most of the IDB API is stupid, but for sensible reasons.
So I'm going to put the value world, and set the key to be hello.
With that, we've finished setting our database up.
And .open returns a promise that resolves with a database object.
So we'll store that for later.
We can use that database object to get and set items in the database.
But for now, if we refresh the page and run the code.
We can pop over to the resources panel in dev tools and yeah, and
right click and refresh.
And there we can see our database.
We can see the object store.
And we can see the value inside.
So now, if I want to read from the database,
I need to create a transaction.
The function to do this is db.transaction.
Passing any object stores, I'm going to be using just keyval.
Then I call object store, passing in the name of the object store I want, keyval.
This seems a bit repetitive but
it's possible to have a transaction that uses multiple objects stores.
I called .get on the object store,
passing in the key I'm interested in, hello.
This returns a promise, which resolves to the value I'm looking for.
Which I'll log.
So over in the browser, if I hit refresh, there's the console log.
But say, I want to add another value to the object store.
To do that, I create a transaction just as I did before but
I specify that I want to read write this time.
Now, I can get my objects stores before but
this time, call .put on on it to set a value.
I'm going to set the key food to be value bar, .put returns a promise but
this promise doesn't necessarily mean the operation worked.
As we saw, if the transaction fails.
All the operations are part of it are undone.
This means that you can do a lot of work in a transaction and be sure that
it won't be left or accessed in some kind of half finished state.
Either all happens or none of it happens.
Transaction.complete is a promise that fulfills if and
when the transaction completes, and it rejects if it fails.
Once the transaction completes, I'm going to logout a success message.
Now I can refresh the browser and see the console log.
And in the resources panel, there it is.
There's the value we set.
Now, I wanted to talk a bit more about IDB features, but
it looks like we're getting rudely interrupted by a certain, Mike Wales.
Mike, what do you want?
>> You've been talking for quite a while there.
I think it's time we let the student have a go.
>> Okay.
Yeah. I think you're right.
Take it away, Mike.