HTML and CSS Reference
In-Depth Information
You also specify the mode (read-only or read/write). You can then obtain an object store from the transaction
and get or put data from/into the store like this:
var xact = db.transaction(["piece", "pieceType"], "readwrite");
var pieceStore = xact.objectStore("piece");
For read/write transactions, the data changes are not committed until the transaction completes. The
interesting question to ask is “when does a transaction complete?” A transaction is complete when there are
no more outstanding requests for it. Remember, everything is request-based. You make a request and then
implement an event handler to do something when it finishes. If that event handler issues another request on
that transaction then the transaction stays alive. This is another important reason for nesting the event handlers.
If you end an event handler without issuing another request, the transaction will complete and all changes are
committed. If you try to use the transaction after that, you will get a TRANSACTION_INACTIVE_ERR error.
Another thing to remember is that read/write transactions cannot have overlapping scopes. If you create a
read/write transaction, you can create a second one as long as they don't both include some of the same object
stores. If they have overlapping scopes, you must wait for the first transaction to complete before creating the
second one. Read-only transactions, however, can have overlapping scopes.
Defining the Database
When you open a database you need to implement three event handlers:
•
onsuccess
- the database is opened, do something with it
•
onerror
- an error occurred, likely an access issue
onupgradeneeded
- the database needs to be created or upgraded
When opening a database, if it doesn't exist, it will be created automatically, however the
onupgradeneeded
event will be raised. You must implement an event handler for this event, which will create object stores and
populate them with any default data. This is the only place where you are allowed to alter the database structure.
The important thing to remember is that the
onupgradeneeded
event is fired before the
onsuccess
event.
The
open()
call also specifies a version number. If this is not the current version, the
onupgradeneeded
event is raises in this scenario also. Your event handler needs to handle both creating a database from scratch
because none exists as well as altering the structure. You can query the database's current version to perform the
necessary steps like this:
•
var request = dbEng.open("Sample", 2); // get version 2
request.onupgradeneeded = function (event) {
alert("Configuring database - current version is " + e.oldVersion +
", requested version is " + e.newVersion);
}
Creating the Application
For this application I will be using the Firefox browser since it fully supports the current draft of the Indexed DB
specification. The only browsers that support Indexed DB are Chrome and Firefox, although IE10 is expected to
support it. The current version of Chrome does not implement the
onupgradeneeded
event however.