Monday, June 11, 2012

Use HTML5 IndexedDB cursors to update existing records

The HTML5 IndexedDB is still in the working draft stage and not fully implemented in major Internet browsers yet. Nevertheless, I tried to use its asynchronous API to develop a Google Maps application. It took me a little while to figure out how to update an existing record in the IndexedDB database store. This can be done by opening a read-write cursor to the record to be updated. Then call the cursor update method to replace it with the new record.

An example Javascript code snippet is shown below.

try {
var objDb;    //the database to update
var store = 'myStore';    //the database store to update
var key = 88;    //the key of the existing record to update
var newRec = 'hello world';    //the new record

var objStore = null;
var objTrans = null;
var objCursor = null;
var objKeyRange = null;
// the database....etc...

//open a read-write transaction
objTrans = objDb.transaction(store,_IDBTransaction.READ_WRITE);

//get the store
objStore = objTrans.objectStore(store);

//create a range from the key
objKeyRange = _IDBKeyRange.only(key);

//open a cursor of only the record to update
objCursor = objStore.openCursor(objKeyRange);

objCursor.onsuccess = function(evt){

  var cursor =;

  //do the update
  var objRequest = cursor.update(newRec);

  objRequest.onsuccess = function(ev){
    console.log('Success in updating record 88');
  objRequest.onerror = function(ev){
    console.log('Error in updating record 88');
  objCursor.onerror = function(evt){
    console.log('Error in retrieving record 88');
catch (e){

No comments:

Related Posts with Thumbnails