Published using Google Docs
IndexedDB Candy Sample (Old API)
Updated automatically every 5 minutes

// This is what our database looks like:

  /* "kids" objectStore:

  [

    { name: "Anna", id: 14 },

    { name: "Betty", id: 26 },

    { name: "Christine", id: 13 },

    // ...

  ]

  */

  /* "candy" objectStore:

  [

    { name: "gum", id: 19 },

    // ...

  ]

  /*

  /* "candySales" objectStore:

  [

    { kidId: 92, candyId: 4, date: "2010-5-12" },

    { kidId: 92, candyId: 6, date: "2010-5-12" },

    { kidId: 92, candyId: 13, date: "2010-5-13" },

    { kidId: 67, candyId: 2, date: "2010-5-14"},

    // ...

  ]

  // has "kidId" index

  */

////////////////////////////////

// Initialize database

  var request = indexedDB.open("CandyDB", "My candy store database");

  request.onsuccess = function(event) {

    var db = event.result;

    if (db.version != "1") {

      // User's first visit, initialize database.

      var createdObjectStoreCount = 0;

      var objectStores = [

        { name: "kids", keyPath: "id", autoIncrement: true },

        { name: "candy", keyPath: "id", autoIncrement: true },

        { name: "candySales", keyPath: "", autoIncrement: true }

      ];

      function objectStoreCreated(event) {

        if (++createdObjectStoreCount == objectStores.length) {

          db.setVersion("1").onsuccess = function(event) {

            loadData(db);

          };

        }

      }

      for (var index = 0; index < objectStores.length; ++index) {

        var params = objectStores[index];

        request = db.createObjectStore(params.name, params.keyPath,

                                       params.autoIncrement);

        request.onsuccess = objectStoreCreated;

      }

    }

    else {

      // User has been here before, no initialization required.

      loadData(db);

    }

  };

  function loadData(db) {

    // Do stuff!

  }

////////////////////////////////

// List kids

  var request = indexedDB.open("CandyDB", "My candy store database");

  request.onsuccess = function(event) {

    request = event.result.openTransaction([”kids”]);

    request.onsuccess = function(event) {

      request = event.source.openObjectStore("kids");

      request.onsucess = function(event) {

        request = event.result.openCursor();

        request.onsuccess = function(event) {

          var cursor = event.result;

          var element = document.createElement("div");

          element.textContent = cursor.value.name;

          document.getElementById("kidList").appendChild(element);

          cursor.continue();

        };

      };

    };

  };

////////////////////////////////

// Store kids into database

  var kids = [

    { name: "Anna" },

    { name: "Betty" },

    { name: "Christine" },

    // ...

  ];

  var request = indexedDB.open("CandyDB", "My candy store database");

  request.onsuccess = function(event) {

    request = event.result.openTransaction([”kids”]);

    request.onsuccess = function(event) {

      var transaction = event.result;

      request = event.source.openObjectStore(”kids”);

      request.onsuccess = function(event) {

        var objectStore = event.result;

        var putCount = 0;

        for (var index = 0; index < kids.length; ++index) {

          objectStore.put(kids[index], null, true).onsuccess = function(event) {

            document.getElementById("display").textContent =

              "Saved record for " + kids[i].name + " with id " + event.result;

            if (++putCount == kids.length) {

              transaction.commit();

            }

          };

        }

      };

    };

  };

////////////////////////////////

// List kids who bought candy, and the number of purchases they made

  candyEaters = [];

  function displayCandyEaters() {

    var display = document.getElementById("purchaseList");

    for (var i in candyEaters) {

      display.textContent += ", " + candyEaters[i].name + "bought " +

                           candyEaters[i].count + "pieces";

    }

  };

  indexedDB.open("MyDB", "My database").onsuccess = function(event) {

    var db = event.result;

    var request = db.openTransaction(["kids", "candySales"]);

    request.onsuccess = function(event) {

      var transaction = event.result;

      var prevKidId = undefined;

      var prevKidRowCount = 0;

      request = db.openObjectStore(”candySales”);

      request.onsuccess = function(event) {

        var objectStore = event.result;

        request = db.openIndex("candySales-kidId");

        request.onsuccess = function(event) {

          var requestCount = 1;

          request = event.result.openObjectCursor();

          request.onerror = function(event) {

            if (event.code == NOT_FOUND_ERR || event.code == NOT_ALLOWED_ERR) {

              if (--requestCount == 0) {

                transaction.commit();

                displayCandyEaters();

              }

            }

          };

          request.onsuccess = function(event) {

            var cursor = event.result;

            cursor.continue();

            if (prevKidId != cursor.value.kidId && prevKidId != undefined) {

              var resultIndex = candyEaters.length;

              candyEaters[resultIndex] = { count: prevKidRowCount };

              ++requestCount;

              request = objectStore.get(prevKidId);

              request.onsuccess = function(event) {

                candyEaters[resultIndex].name = event.result.name;

                if (--requestCount == 0) {

                  transaction.commit();

                  displayCandyEaters();

                }

              };

              prevKidRowCount = 0;

            }

            prevKidId = cursor.value.kidId;

            prevKidRowCount++;

          }

        };

      };

    };

  };

////////////////////////////////

// List all kids and the number of purchases they made (some may have bought 0)

 candyEaters = [];

 indexedDB.open("MyDB", "My database").onsuccess = function(event) {

   var db = event.result;

   var request = db.openTransaction(["kids", "candySales"]);

   request.onsuccess = function(event) {

     var transaction = event.result;

     var kidCursor;

     var saleCursor;

     var salesLoaded = false;

     var count;

     request = db.openObjectStore("kids");

     request.onsuccess = function(event) {

       request = event.result.openObjectCursor();

       request.onerror = function(event) {

         if (event.code == NOT_FOUND_ERR || event.code == NOT_ALLOWED_ERR) {

           transaction.commit();

           displayCandyEaters();

         }

       };

       request.onsucces = function(event) {

         kidCursor = event.result;

         count = 0;

         attemptWalk();

       };

     };

     request = db.openIndex("candySales-kidId");

     request.onsuccess = function(event) {

       request = event.result.openObjectCursor();

       request.onerror = function(event) {

         if (event.code == NOT_FOUND_ERR || event.code == NOT_ALLOWED_ERR) {

           saleCursor = null;

           salesLoaded = true;

           attemptWalk();

         }

       };

       request.onsucces = function(event) {

         saleCursor = event.result;

         salesLoaded = true;

         attemptWalk();

       };

     };

     function attemptWalk() {

       if (!kidCursor || !salesLoaded)

         return;

       if (saleCursor && kidCursor.value.id == saleCursor.kidId) {

         count++;

         saleCursor.continue();

       }

       else {

         candyEaters.push({ name: kidCursor.value.name, count: count });

         kidCursor.continue();

       }

     };

   };

 };