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

In this series we are using the IndexedDB API to create a basic note-keeping utility within a Web page. In the first part of the series we setup the HTML5 page elements and started IndexedDB processing by attempting to open the database. In this part we will be working on creating the object store, which is how we define the structure of the note database. In the final two parts of the series we will handle inserting, deleting and querying notes. This is part 2 in a series of 4 tutorials:

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

Handle Upgrades

If you look back at the code we used last time to attempt opening the database, you will see that we included a version number along with the database name. If the database does not exist yet, or if the version number is greater than the existing version, the “onupgradeneeded” method will fire. In this method, we will specify the database structure and it will be created on first run.

The “onupgradeneeded” method is an issue on Chrome browsers at the time of writing. Unfortunately Chrome is still supporting the older “setVersion” method instead. Hopefully future editions of the browser will add support for the most recent standards.

In your page script section, inside the “init” method, after the “onsuccess” handler function we created last time, add the upgrade method as follows:

	//if upgrading - this is where we specify the structure
noteRequest.onupgradeneeded = function(event) { 

};

Notice that the method uses the request object we created and used last time. Inside this method we will specify the structure of the database.

Create the Object Store

In the new upgrade method, first retrieve a reference to the database as follows:

	//get the database
noteDB = event.target.result;

This is the database variable we declared last time. Now use it to define the database structure:

	//create the object store
var noteObjectStore = noteDB.createObjectStore("notes", { keyPath: "noteID", autoIncrement: true });

Take a moment to look over this code as understanding it is vital. The first parameter to the “createObjectStore” method is the name you want to use for the data store. Next are the optional parameters, of which we are using two – a key path and a key generator.

IndexedDB stores data in key value pairs. When you create a new object store, you can use either a key path or a key generator, or neither, or both. In this case we are using a key path defined by name and a key generator defined as auto-incrementing. This means that the data store must contain a JavaScript object to represent each user note. The key path is stored as a property within each note object, containing the auto-incremented number generated by the key generator, making each object in the data store unique. You can also choose to make any object property you are using unique with an index, which we will cover below.

When this line executes, supporting browsers should create a store with the specified properties. However, we have not indicated anything yet about the content of items in the note store.

Create Indices

The note database is going to store the time, text content and unique ID for each note. We are going to create an index for the time and text content, although this is not strictly necessary. Creating an index for a database record attribute allows you to search on the values stored for those attributes if you wish to do so. After the line in which we created the object store, add the following:

	//create indices in case we want to search on these
noteObjectStore.createIndex("when", "when", { unique: false });
noteObjectStore.createIndex("text", "text", { unique: false });

The first line creates an index for the time property of each note and the second for the text content. The parameters represent the index name, key path name and an array of optional parameters. We don’t need the notes to have unique times or content values, so we set the unique constraint to false.

Without an index, you would only be able to look up database items based on the auto-incremented ID key – with these indices, you will be able to query based on the values held for a note’s date and text content. You can also use the index to enforce constraints such as uniqueness, as above. However, you do not need to create indices for your data store so you can omit these two lines of code if you prefer.

Conclusion

That’s all for this part of the series. We have now implemented creating the object store for our user notes and have completed the “init” method. Next time we will add methods to insert and delete notes, before ultimately presenting the notes within the Web page in the final part. If you want to experiment further with IndexedDB for future projects, there are lots of options you can explore for the steps we have carried out in this tutorial, particularly with the structure of the database as well as the keys used within it.