Last week I blogged about maxing out the database size on your browser with IndexedDB, but I didn't test with IE. This morning I did, and unfortunately, it looks like IE does the same bad thing it does with LocalStorage (see my post for details).

I discovered that IE11 would silently fail on adding LocalStorage data when the storage limit was reached. Even worse, you could set, and read data that wasn't actually stored. I slightly modified my code from the previous post to make it a bit more verbose. Here is the new version - I'll point out what's new below.

<!doctype html>
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height" />


var db;
var dbname = "bighonkingtest2";
var storename = "crap_new";

imgurl = "baby.jpg";

function urlTo64(u, cb) {
  var xhr = new XMLHttpRequest();'GET', imgurl, true);
  xhr.responseType = 'blob';

  xhr.onload = function(e) {
    if (this.status == 200) {
      // get binary data as a response
      var blob = this.response;
      var reader = new FileReader();
      reader.onloadend = function() {
        base64data = reader.result;


function indexedDBOk() {
	return "indexedDB" in window;

document.addEventListener("DOMContentLoaded", function() {

	//No support? Go in the corner and pout.
	if(!indexedDBOk()) return;

	var openRequest =,1);

	openRequest.onupgradeneeded = function(e) {
		var thisDB =;

		console.log("running onupgradeneeded");

		if(!thisDB.objectStoreNames.contains(storename)) {
			thisDB.createObjectStore(storename, {keyPath:"id",autoIncrement:true});


	openRequest.onsuccess = function(e) {
		console.log("running onsuccess");

		db =;

		console.log("Current Object Stores");

		//Listen for add clicks
		document.querySelector("#addButton").addEventListener("click", addData, false);
		document.querySelector("#countButton").addEventListener("click", countData, false);

	openRequest.onerror = function(e) {
		//Do something for the error


function addData(e) {
	console.log("About to add data");

  urlTo64(imgurl, function(s) {
  	//Get a transaction
  	//default for OS list is all, default for type is read
  	var transaction = db.transaction([storename],"readwrite");

	transaction.oncomplete = function(e) {
		console.log("transaction onsucc");

	transaction.onerror = function(e) {
		console.log("transaction onerr");

	//Ask for the objectStore
  	var store = transaction.objectStore(storename);

  	//Define data
  	var data = {

  	//Perform the add
  	var request = store.add(data);

  	request.onerror = function(e) {
  		//some type of error handler

  	request.onsuccess = function(e) {
  		console.log("Woot! Did it");


function countData() {
  	var transaction = db.transaction([storename],"readonly");
  	var store = transaction.objectStore(storename);
	var req = store.count();
	req.onsuccess = function(e) {
		console.log(req.result + " items.");
	req.onerror = function(e) {
		console.log("error getting count", e);

<button id="addButton">Add Data</button>
<button id="countButton">Count Data</button>


The first change was to set both the db and objectstore name to variables so I could quickly change them. I then added error/complete handlers to the transaction that handles adding data. Finally, I added a simple "count" method.

To test, I loaded the page up and clicked like crazy. I noticed that at 31 items, the count stopped updating. Here is where things got bad. Before this limit, my transaction complete handler did run. After I hit it, the success handler stopped running, but the onerror method never ran!

I modified the objectStore name and confirmed that in a new store, I could still successfully add data (according to the event handlers) but count was stuck at 0. I had to clear my data in IE settings to get it to let me add data again.

I'll file a bug report for this as soon as I can, but I honestly don't know what to suggest. You could add a timeout call in the add functionality to check for a global variable set in your transaction success. If not set, then it didn't fire and you can assume it failed. That feels quite hackish though.

But hey - this is still better (kinda) than mobile Safari, so, yeah, there's that. ;)