IndexedDB and Limits - IE

This post is more than 2 years old.

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. ;)

Raymond Camden's Picture

About Raymond Camden

Raymond is a senior developer evangelist for Adobe. He focuses on document services, JavaScript, and enterprise cat demos. If you like this article, please consider visiting my Amazon Wishlist or donating via PayPal to show your support. You can even buy me a coffee!

Lafayette, LA

Archived Comments

Comment 1 by Raymond Camden posted on 4/24/2015 at 3:00 PM
Comment 2 by Šime Vidas posted on 4/26/2015 at 11:17 PM

Off topic, but what’s up with that meta viewport tag you’re using (in the code above)? :) Is that the default value in your editor or IDE?

Comment 3 by Šime Vidas posted on 4/26/2015 at 11:38 PM

Could you link to the baby.jpg image? I’ve made a demo with a different image here (your code + replaced image URL with an image from Imgur), and wasn’t able to hit the limit in IE11 nor Spartan.

Comment 4 (In reply to #2) by Raymond Camden posted on 4/27/2015 at 10:37 AM

I tend to reuse the same 4 or 5 templates for testing, so I must have been using it for a mobile demo earlier.

Comment 5 (In reply to #3) by Raymond Camden posted on 4/27/2015 at 10:38 AM

It is a 3.1 megabyte JPG. If you want a copy, drop me a line. It is a family picture I'd rather not share online.

Comment 6 (In reply to #5) by Šime Vidas posted on 4/28/2015 at 2:09 AM

No prob. I can confirm the issue in Spartan:

Comment 7 (In reply to #0) by Raymond Camden posted on 4/22/2016 at 2:30 PM

I'd go with onabort if it seems to work well for you.