Alright, we have an indexed DB database set up, but as we can see below, it's empty. Let's start off by saving any note that is typed into our editor into the notes store that we created in the previous video. I'm going to exit this, and let's open up our source code. The first thing that I'm going to do is add a button underneath of our editor to allow a user to save a note into the database. So underneath our editor, I'm going to just add in a new div, and I'm going to style it so that it's a bar at the very bottom of the screen. Alright, and back in our browser, we can see that button here at the bottom, Save Note, but it doesn't do anything yet.

Alright, and back in our browser, we can see that button here at the bottom, Save Note, but it doesn't do anything yet. We don't have a method attached to it. So back in the source code again, I'm going to add an @click event handler to this, which is just shortcode for v-on:click, and we have to give it a method to fire whenever the button is clicked. Let's just call this saveNote. And let's go down to our methods, and we'll add that into it. So after getDatabase, we'll add one called saveNote. In this method, we need to create a transaction, which is an object that gives us read or write.

So after GetDatabase, we'll add one called SaveNote. In this method, we need to create a transaction, which is an object that gives us read or write access to our object store that we created earlier. So we'll let transaction equal this.database, which is our current index database object initialized on create, and transaction. Now this expects two arguments. The first one is the store or stores that we're going to be accessing during this transaction. We only have the notes store, and so that's the only one that we're going to be accessing. If there was more than one though, we could use an array and pass in multiple of them. But again, we just have the notes store, so it's just notes.

If there was more than one though, we could use an array and pass in multiple of them. But again, we just have the notes store, so it's just notes. Now if we left this as it is, the transaction would only be available in read-only mode. We wouldn't be able to write anything new to any of our object stores. In order to change that, we just pass in a second argument, which is the mode that we want to use for this transaction. Since we're going to be both reading and writing from the database, we use read-write. Like I talked about before though, all of the methods around IndexedDB are asynchronous, which means that this transaction being initialized and everything that we're about to do with it are all asynchronous methods.

which means that this transaction being initialized and everything that we're about to do with it are all asynchronous methods. So what I'm going to do, like with our getDatabase method, we're going to use async here for saveNote, and this is going to return a new Promise. Okay, after we initialize the transaction, like with a database initialization, it runs on events. There's only one that we're really looking for right now though, and that's onComplete. It's a function. And this is fired whenever a transaction finishes up. Whenever that happens, we just want to resolve.

And this is fired whenever a transaction finishes up. Whenever that happens, we just want to resolve. And now we detail what that transaction is. So transaction, and we're writing something to the database's table, so we reference that object store. Notes. We're saving a note, so we should add a row to this database table, so we just use the add method. And this expects an object. XDB doesn't really have a set schema associated with it, at least not one that you set up.

And this expects an object. XDB doesn't really have a set schema associated with it, at least not one that you set up before adding data to it. So here we just kind of want to determine what attributes we're going to be saving and the data associated with them. I can really only think of two that I want, and that's the content of the actual note and the date that it was created. Both of these are pretty straightforward to get. The content I want to store is the raw HTML that the TipTap editor we have is currently displaying.

The content I want to store is the raw HTML that the TipTap editor we have is currently displaying. We can get that by referencing the editor at this editor and using the getHTML method. I believe it's all capital getHTML. And for the created date, I just want to store the current epoch time. So let's create a new Date object up here, let now equals new Date(), and then created is just now.getTime(). Okay so how this works is that whenever this Save Note button is clicked and this method is fired, a promise is started where a transaction is generated from the index database for the notes store.

And under this create objectStore method, after notes we're going to pass in an object and we're going to specify the keyPath attribute. And for that we're going to use the created attribute that we're saving into the database below. One quick thing to note though is that if we were to save this and try to load up the website again, this onUpgradeNeeded isn't going to be fired because the version of the database is still the same, it's still 1. In order to actually fire that and make the changes to our schema, we need to upgrade this to a different version that's higher than that, so we're going to set this to 2. And so by increasing this value, we're ensuring that this onUpgradeNeeded event is called.

this to a different version that's higher than that, so we're going to set this to 2. And so by increasing this value, we're ensuring that this onUpgradeNeeded event is called. But actually, when this goes to create this object store, it's going to error out again too because stores are shared throughout each version. Just because we are changing the keypath associated with it, we're not adding a new store or a different name for it, and so nothing really happens except an error in the console. In order for us to get around this, the first thing I'm going to do is remove the old store. So using the same technique in the createObjectStore method, etarget, results, we're going to delete object store, notes. So this will ensure each time that we need to upgrade, we're starting with a fresh database,

In an application we have this data may be stale alert here, but if we refresh our database, we can see now that we have a key associated with the current epoch time, and a value containing our object. So we have our content here, in full HTML, and our created date, which is the exact same as our key. So now that we have the ability to save notes, I also want the ability to get them whenever this application loads up, and we can display them in this sidebar here. Let's go ahead and try to add that in. So back in our source code, we're going to need to add a new method to the created lifecycle event, and we'll call it getNotes.

So back in our source code, we're going to need to add a new method to the created lifecycle event, and we'll call it getNotes. This needs a place to store the notes though, so we'll create a new blank array in our data attribute up here, and we'll initialize that as the return from that method. And like with everything else, we know that index.db is asynchronous, so we need to call await on this, and pause the application until our notes come back. So now let's create that method. Back down here at the bottom of this, we'll add a new async method, getNotes, and like with our other two, it returns a new Promise. So the first thing that we need to do is get our object store.

with our other two, it returns a new promise. So the first thing that we need to do is get our objectStore. So like we did with saving a note, the first thing that we need to do is create a new transaction. So let transaction equals this database.transaction(notes), and we can leave this blank since we just want to read from it, we're not writing to it as well. And then we're going to use this transaction to get our notes objectStore. So transaction, and we call the objectStore method on that, and pass in the store that we want to access. In our case, that's just the notes store. The final piece of this is the method that we need to call in order to get all of the

In our case, that's just the notes store. The final piece of this is the method that we need to call in order to get all of the notes in the database. Now depending on what you want to do for this, it can get a little difficult using something called an IndexedDB cursor, where we kind of loop through the database and take each item out, reserving it into an array and then return the whole array at the end of it. That's only really useful though if you want the object you're storing as well as the key in the database, but we already have that key in each object. It's the created date that we're storing in it. So we can use an even simpler method, and that's just called getAll.

It's the created date that we're storing in it. So we can use an even simpler method, and that's just called getAll. So we can say notes equals notesStore getAll. But of course, like with everything else, this getAll method is asynchronous, which means that this notes here is just a request object until an actual event is fired for it. So like with our other transactions and the database initialization, we need to create an event handler and wait for that event to happen before we resolve this promise. We can do that by saying notes onSuccess, which will fire whenever that getAll method returns successfully, and it's equal to a function that resolves etargetResult. So unlike the database initialization where etargetResult is the database that we initialize,

returns successfully, and it's equal to a function that resolves etargetResult. So unlike the database initialization where etargetResult is the database that we initialize, this result is going to be the result of the getAll method on our notesStore, which means it will contain an array of all of our notes objects. Oh, resolve, not resolves. And this looks good, but there's a lot of repetition here and a lot of initialization of variables that kind of only exist to pass on to the next one. And we can actually clean this up a decent amount. So we should be able to chain on everything that's in here. So we can say notes is this database, transaction, notes, objectStore, notes, getAll, and onSuccess,

So we should be able to chain on everything that's in here. So we can say notes is this database, transaction, notes, object store, notes, getAll, and onSuccess, it equals this function here. So we can get rid of this initialization and these two, and this is what we should be left with. So the database makes a transaction called notes on the object store notes. It gets all of them, and on the success for all of that, it resolves with the target result. In order to see this actually works, I'm also going to console.log this. So we can see if this actually returns the notes that are expected from our database. Back in our browser, let's go ahead and refresh and open up our DevTools.

So we can see if this actually returns the notes that are expected from our database. Back in our browser, let's go ahead and refresh and open up our DevTools. And perfect, we can see that in our console here we have getNotes, an array containing one object, and that object is the content that we had saved before, as well as the time it was created at. One last thing that I want to do before the end of this video, though, is make use of those notes and display them in our sidebar here. So back to our app.vue file, we'll scroll up into our markup, and in the sidebar here, I'm going to add some markup to create a kind of wrapper for our sidebar. And I'm going to create each of these notes as a link, and I'll style it a bit with some.

I'm going to add some markup to create a kind of wrapper for our sidebar. And I'm going to create each of these notes as a link, and I'll style it a bit with some tailwindcss. Add in the v4. And in order to reference that note, I'll just give it the title of the date it was created at. So we'll return newDate, when the note was created, and toLocaleString should give us a nice user-readable format for the date to be in. All right, let's check that out in the browser. And perfect!

All right, let's check that out in the browser. And perfect! We have our one note here, which was created January 8th at 6:08pm. But if we were to create another one and hit this Save Note button, it wouldn't actually populate in that sidebar, because we're saving it into the database, but only initializing the notes array whenever the app is loaded up. So heading back into our source code, we can easily fix that by going to the method that we used to save the note. Before we add it to the database, we can also add it to our local notes object. Instead of replicating this twice though, I'm just going to create a new object.

Before we add it to the database, we can also add it to our local notes object. Instead of replicating this twice though, I'm just going to create a new object. And now we can push that object to the notes array and save it into the database. Okay so let's see that in action. Let's create a new note. And when we hit Save Note, we can see it populate in the database here at the bottom. Ooh, but the bottom. This might be good for most things, but for notes I think I'd want the newest one at the top. That's not a hard fix though.

top. That's not a hard fix though. Instead of push, we can use the unshift method, which will add it to the top of the array instead of the end of it. And then additionally, the items that we're getting back from the database, the get notes here, are going to be in the order they were added to the database, which means they're going to be the oldest at the top and the newest at the bottom. We could let the database sort that, but instead it's really easy with just a single JavaScript method. And so we can create a notes variable with the notes in the database and initialize our