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>
<html>
<head>
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height" />
</head>
<body>
<script>
var db;
var dbname = "bighonkingtest2";
var storename = "crap_new";
imgurl = "baby.jpg";
function urlTo64(u, cb) {
var xhr = new XMLHttpRequest();
xhr.open('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.readAsDataURL(blob);
reader.onloadend = function() {
base64data = reader.result;
cb(base64data);
}
}
};
xhr.send();
}
function indexedDBOk() {
return "indexedDB" in window;
}
document.addEventListener("DOMContentLoaded", function() {
//No support? Go in the corner and pout.
if(!indexedDBOk()) return;
var openRequest = indexedDB.open(dbname,1);
openRequest.onupgradeneeded = function(e) {
var thisDB = e.target.result;
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 = e.target.result;
console.log("Current Object Stores");
console.dir(db.objectStoreNames);
//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
}
},false);
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");
console.dir(e);
}
transaction.onerror = function(e) {
console.log("transaction onerr");
console.dir(e);
}
//Ask for the objectStore
var store = transaction.objectStore(storename);
//Define data
var data = {
img:s
}
//Perform the add
var request = store.add(data);
request.onerror = function(e) {
console.log("Error",e.target.error.name);
console.dir(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);
}
}
</script>
<button id="addButton">Add Data</button>
<button id="countButton">Count Data</button>
</body>
</html>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. ;)