Create a User Note-Keeping Utility For Your Site With IndexedDB: Part 3

In this series on creating a user note-keeping utility, we are using IndexedDB to store user notes on a Web page. In the first two parts of the series we created the IndexedDB database and object store, as well as the initial visible HTML elements in the Web page. In this part we will implement allowing the user to add and delete notes to and from the data store. In the final part of the series we will query the notes and display them within the page. This is part 3 in a series of 4:

1. Setup and opening the note database
2. Creating the object store
3. Adding and deleting notes
4. Querying and presenting notes

To add notes, the user will interact with the visual elements we have already created. To delete notes, the user will interact with the visible elements we will build in the final part of the series. We will add JavaScript functions to handle adding and deleting, calling these functions on user interaction.

Create a Function for Adding Notes

In your JavaScript section in the page head, after the “init” function and before the line in which you add the event listener to call the “init” function, add the following function outline:

/*
Function called when user adds a note
*/
function addNote(){ 

}

Notice that this is the function we call in the HTML code, when the user clicks the “add” button to submit any text they have typed into the text-field. In this function we will pull the user text and add it to the note database. First, let’s get the content from the text input element using its ID attribute:

	//get user submitted content
var noteIn = document.getElementById("note_in");
var newNote = noteIn.value;

We only want to carry out the adding process if the user has actually entered text, so add the following conditional test:

	//only carry on if there is content
if(newNote.length>0) {

}

The remainder of the adding code will go inside this “if” statement. First, get references to the transaction and object store objects using the database:

//get transaction
noteTransaction = noteDB.transaction("notes", IDBTransaction.READ_WRITE);

//get object store
noteObjectStore = noteTransaction.objectStore("notes");

We need a transaction that will allow us to write to the database and we specify the object store by name. Remember that we are going to include the date on which a note was created, so let’s build that now as a text string ready to add as part of the new note:

	//get the date
var currentTime = new Date();
var month = currentTime.getMonth() + 1;
var day = currentTime.getDate();
var year = currentTime.getFullYear();
var dateText = month + "/" + day + "/" + year;

Now we can try adding the new note data:

	//add the new note data - date and text, ID key will be autoincremented
noteRequest = noteObjectStore.add({ when: dateText, text: newNote });

The new note consists of the date, the text content of the note and the index, which is auto-generated as we specified last time. As with most IndexedDB functions, we now need success and failure handlers, still inside the “if” statement:

	//successfully added
noteRequest.onsuccess = function(event) {
	//reset textarea content
	noteIn.value="";
	//fetch all current notes
	getNotes();
};

If the addition is successful, we empty the contents of the text input element so that the user can add another note if they wish. We also call the “getNotes” function, which we will create in the next tutorial to display all currently stored notes in the page. Add the error handler after the “onsuccess” function, creating an error message for the user:

	//error adding note
noteRequest.onerror = function(event) {
	alert("Oops - note not added");
};

Create a Function for Deleting Notes

Now let’s add a function outline for deletion, after the “addNote” function we’ve just completed:

/*
Function called when deleting note
- function receives note ID key for identification
*/
function deleteNote(noteKey) {

}

This time the function takes a parameter, representing the ID key for the note being deleted. We have not called this function from the HTML markup code yet because it is going to be called from the note items themselves when they are added to the page display – we will implement that in the last part of the series. Inside this new function, attempt to carry out the deletion:

	//request to delete passing key from button input element
noteRequest = noteDB.transaction("notes", IDBTransaction.READ_WRITE).objectStore("notes").delete(noteKey);

We use a shorthand version of the code to retrieve the transaction for demonstration, as an alternative to the approach we used in the adding function. First we get the transaction, then retrieve the object store from it, then execute the deletion on the object store, passing the key representing the note item. When we create the note elements and display them in the page next time, we will include the note ID key as part of the HTML markup for each note element. Now let’s add the success handler:

	//deletion successful
noteRequest.onsuccess = function(event) {
	//fetch current notes again
	getNotes();
};

Here we call the function to fetch and display the notes again. This will mean that the page will refresh the display of all notes, so that the note just deleted will disappear from view.

Conclusion

Our addition and deletion functions are now complete. In the final part of the series we will pull all of the elements we have created in the first three parts together, implementing display of the notes within the Web page. This will involve querying the database object store and building an HTML element for each note stored in it.