In previous post I have been talking about the basic concepts in the Indexed DB and how you can open/create a database and a database connection. Today I will tell you how you can construct your own database structure. This includes defining the object store where we can store our objects and defining indexes. These indexes will be used when searching into the objects we store in our database.
version_change transaction
There exists only one way to define your object stores and indexes, and this is in a VERSION_CHANGE transaction. We can start this transaction by calling the setVersion method on the database connection. When a database is initially created, the version of the database is an empty string. By passing a string as version to the setVersion method, we add object stores and indexes. This we do by defining the onsuccess event. We can also provide error handeling trough the onerror event.
var dbreq = dbConnection.setVersion(version);
dbreq.onsuccess = function (event) {
// Here we put code to create object stores or indexes
}
dbreq.onerror = function (event) {
// Here we put code to handle an error while changing the version
}
dbreq.onabort = function (event) {
// Here we put code to handle an abort when changing the database version
}
If we are using the IE 9 Indexed DB prototype, we need to commit the transaction. In all other browsers this is not necessary because the implementation of Indexed DB determines that every transaction is committed by default when closed. If a transaction should be aborted you have to do this explicitly.
dbreq.onsuccess = function (event) {
var txn;
if (event.result) {
txn = event.result;
}
// Here we put code to create object stores or indexes
if(typeof(txn.commit) != "undefined")
{
txn.commit();
}
}
Because a database can’t have multiple versions at one time, the only way you can change the version is by closing all other connections to the database. This also means no new connections can’t be opened until the VERSION_CHANGE transaction is completed. A blocked event will be raised when a connection to the database is still open when changing the version.
dbreq.onblocked = function (event) {
// Here we put code to handle an abort when changing the database version
}
Creating an objectStore
Once we started the VERSION_CHANGE transaction, we can start adding or deleting object stores. We can do this by calling the createObjectStore method. As first parameter we need to pass the name of the object store. Optionally you can can add two extra parameters. The first one is JSON object with two fields. The first field is a keyPath, when this is provided, the key of the object store will be determined by the field that has the name given in the string of the key path. The second field determines if the object store should have a key generator.
The last parameter we pass is the same as the autoIncrement field in the second parameter. We do this to enable the object store to have a key generator in the IE9 prototype. When using Firefox, Chrome and IE 10, you don’t need to pass this parameter.
The following combinations of a KeyPath and autoIncrement are possible:
| Key path | Auto increment | Description |
| Empty | False | This object store can hold any kind of value, even primitive values like numbers and strings. You must supply a separate key argument whenever you want to add a new value to the object store. |
| Provided | False | This object store can only hold JavaScript objects. The objects must have a property with the same name as the key path. |
| Empty | True | This object store can hold any kind of value. The key is generated for you automatically, or you can supply a separate key argument if you want to use a specific key. |
| Provided | True | This object store can only hold JavaScript objects. Usually a key is generated and the value of the generated key is stored in the object in a property with the same name as the key path. However, if such a property already exists, the value of that property is used as key rather than generating a new key. |
dbConnection.createObjectStore("ObjectStoreName"
, { "keyPath": "keyPath"
, "autoIncrement": true }
, true);
removing an object store
When we want to remove an object store, the only thing we need to pass is the name of the object store we want to remove.
dbConnection.deleteObjectStore("ObjectStoreName");
Creating an INDEX
Once we created our object store, we can add indexes to it. These indexes are object stores as well, but the key of these key/value pairs is the key path of the index. This means that in this object store that multiple keys with the same value are allowed. When we want to create an index we need to provide a name and a key path for them. Optionally we can provide a JSON object with a unique and multiplerow field.
| Field | Description | Support |
| unique | A boolean value indicating whether the index allows duplicate values. If this attribute is "true", duplicate values are not allowed. Duplicate values are allowed when this attribute is "false" (the default value). This means when you add an object to an object store where an index with a unique value on "true". You will get an exception when you add an object with a duplicate value in the field of the key path of the index. | IE 10
FF
Chrome |
| multiplerow | A boolean value that describes determines the results when multiple rows in the object store match individual key values. When this happens, the resulting object is an array. If this parameter is "true", the resulting array contains a single item; the key of the item contains an array of the matching values. When this parameter is "false" (the default), the result array contains one item for each item that matches the key value. | IE 10 |
store.createIndex("IndexName"
, "keyPath"
, { unique: false });
If we want to create an index in IE 9 Indexed DB prototype, we need to pass the boolean value for the uniqueness as parameter and not as a JSON object.
store.createIndex("IndexName"
, "keyPath"
, false);
Deleting an index
The last action we can do in the VERSION_CHANGE event is deleting an existing index. We can do this by passing the name of the index we want to delete.
store.deleteIndex("IndexName");
