Extract getDatabase Method2:58
attribute. And that's what I'm going to use here in the created method. So first thing I'm going to get rid of this, and I'm going to move it into a method of its own. So at the bottom here, we'll create a methods object. And let's create one called getDatabase, which will return our opened IndexedDB database. This actually needs to be an async method, since we're going to be returning a new Promise. Like we did before, let's create our db object by calling window.indexedDB.open, onNotes, and leaving the version blank. And now whenever this open method resolves, it can call one of three methods, depending
and leaving the version blank. And now whenever this open method resolves, it can call one of three methods, depending on what happens. It can either call onError, onSuccess, or onUpgradeNeeded. And also, for those who are unfamiliar with the error notation that I just used, it's no different than this. Just a shorter, cleaner syntax. So these are functions that get fired whenever the database has an error, success, or upgrade needed event. So onError, we want to reject and say that there was an error opening the database.
Handle onUpgradeNeeded Schema5:06
And that is higher than any version we have on our site right now, which is nothing. There is no IndexedDB on our site. This is the first time that it will be loaded up, which means that this event will fire. What this method is used for is to pass in and provide schema changes and set up the structure of our actual database. And we do that with a method called createObjectStore. So first we get the actual database. Like with onSuccess, that's e.target.result. And to that we call a method called createObjectStore. Now what an object store is, is basically just a table.
And to that we call a method called createObjectStore. Now what an object store is, is basically just a table. So like you would create a table for posts or comments in a MySQL database, you create an object store in an IndexedDB database. Our database's name is already notes, and this might be a bit confusing, but our table should be notes as well, because it's just storing notes. So I'm going to create an object store, and the first argument is the table name. So I'm going to say notes, and then the second argument is an object containing any kind of options that you might want to pass in to this store. Right now I don't need to add anything to this though, so I'm just going to exclude
of options that you might want to pass in to this store. Right now I don't need to add anything to this though, so I'm just going to exclude it. And that's it. Unlike OnSuccess, we don't need to resolve after onUpgradeNeeded, because once the upgrade is complete, if it runs successfully, it will fire the OnSuccess event. I am going to go ahead though and add in some console logs here so we can see what's happening. And we'll pass in the event for each of these so we can go through it. Okay, so now in our created method, we can just call this getDatabase. And I'd like to add it in as a data attribute.
Await DB in Created6:53
Okay, so now in our created method, we can just call this getDatabase. And I'd like to add it in as a data attribute. So we can add a new one in here called database, and set it to null. And say this database equals getDatabase. But remember how I said that everything is asynchronous with IndexedDB? I don't want to continue with the rest of my application loading up until I have that database ready. So instead this should be await getDatabase. And this needs to be an async created method. Alright now let's go to our browser and see how this works.
Verify DB in Browser7:28
And this needs to be an async created method. Alright now let's go to our browser and see how this works. Alright so far everything seems the same, but let's open up our console. Okay we have a dbOnSuccess event. And we get back the object for it. And if we open up the target, we have our result, which is the database. And we have a name of notes and an object store of notes. You might be wondering where the onUpgradeNeeded method is that didn't pass into this console. And it might be because I have live refresh going right now while we're developing this. So it could have happened in the background while we were working on the website and I
Next: Save and Load Notes8:44
So right now we have nothing in here and that will change in the next video. And we figure out how to save and retrieve notes to this.
