IndexedDB getAll() Methods Sample

Available in Chrome 48+ | View on GitHub | Browse Samples

Background

The IndexedDB "batched get" API allows you to retrieve several keys or values from IndexedDB in a single method call. The "batched get" methods include:

Live Output

You can use the buttons to add new timestamps to IndexedDB, and to display a full list of timestamps that were previously set using IDBObjectStore.getAll().

JavaScript Snippet

var addButton = document.querySelector('#add');
var displayButton = document.querySelector('#display');

var DB_NAME = 'timestamps';
var DB_VERSION = 1;
var STORE_NAME = 'store';
var db;

var request = indexedDB.open(DB_NAME, DB_VERSION);
request.onupgradeneeded = function() {
  // Create a new object store if this is the first time we're using
  // this DB_NAME/DB_VERSION combo.
  request.result.createObjectStore(STORE_NAME, {autoIncrement: true});
};
request.onsuccess = function() {
  db = request.result;
  // Enable our buttons once the IndexedDB instance is available.
  addButton.disabled = false;
  displayButton.disabled = false;
};

addButton.addEventListener('click', function() {
  var transaction = db.transaction(STORE_NAME, 'readwrite');
  var objectStore = transaction.objectStore(STORE_NAME);
  // Add the current timestamp to IndexedDB.
  objectStore.put(Date.now()).onsuccess = function() {
    ChromeSamples.setStatus('Added timestamp to IndexedDB.');
  };
});

function logTimestamps(timestamps) {
  ChromeSamples.setStatus('There are ' + timestamps.length +
    ' timestamp(s) saved in IndexedDB: ' + timestamps.join(', '));
}

displayButton.addEventListener('click', function() {
  var transaction = db.transaction(STORE_NAME, 'readonly');
  var objectStore = transaction.objectStore(STORE_NAME);

  if ('getAll' in objectStore) {
    // IDBObjectStore.getAll() will return the full set of items in our store.
    objectStore.getAll().onsuccess = function(event) {
      logTimestamps(event.target.result);
    };
  } else {
    // Fallback to the traditional cursor approach if getAll isn't supported.
    var timestamps = [];
    objectStore.openCursor().onsuccess = function(event) {
      var cursor = event.target.result;
      if (cursor) {
        timestamps.push(cursor.value);
        cursor.continue();
      } else {
        logTimestamps(timestamps);
      }
    };
  }
});