vaughnroyko · December 30, 2020 12:35
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
 	<head>
 		<title>IndexedDB onbeforeunload Test</title>
 		<script src="http://cdnjs.cloudflare.com/ajax/libs/idbwrapper/1.4.1/idbstore.min.js"></script>
 		<script>
 			var idb, i;
 			var testData1 = [];
 			var testData2 = [];
 			var testData3 = [];

 			for(i = 0; i < 40000; i++) {
 				testData1[i] = { thing: 29398200928, anotherThing: "test", yetAnotherThing: true };
 			}

 			for(i = 0; i < 40000; i++) {
 				testData2[i] = [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ];
 			}

 			for(i = 0; i < 80000; i++) {
 				testData3[i] = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nisi neque, interdum consectetur est eu, interdum venenatis leo. Proin sapien ex, euismod vitae dolor quis, auctor egestas purus.";
 			}

 			window.onload = function() {
 				idb = new IDBStore({
 					dbVersion: 1.0,
 					storeName: 'IDBTest',
 					keyPath: null,
 					autoIncrement: false,
 					onStoreReady: function() {
 						idb.get('testData1', function(value) {
 							if (value) {
 								document.getElementById("results1").innerHTML = "#1 Got test data!";
 							} else {
 								document.getElementById("results1").innerHTML = "#1 Did not get test data!";
 							}
 						});
 						idb.get('testData2', function(value) {
 							if (value) {
 								document.getElementById("results2").innerHTML = "#2 Got test data!";
 							} else {
 								document.getElementById("results2").innerHTML = "#2 Did not get test data!";
 							}
 						});
 						idb.get('testData3', function(value) {
 							if (value) {
 								document.getElementById("results3").innerHTML = "#3 Got test data! Since all data was recieved, the DB has been cleared for you to try again.";
 								idb.clear();
 							} else {
 								document.getElementById("results3").innerHTML = "#3 Did not get test data!";
 							}
 						});
 					}
 				});
 			};

 			window.onbeforeunload = function() {
 				idb.put('testData1', testData1);
 				idb.put('testData2', testData2);
 				idb.put('testData3', testData3);
 			};
 		</script>
 	</head>

 	<body>
 		<h1>IndexedDB onbeforeunload Test</h1>
 		<p>This page has just created (or attempted to create) an IndexedDB in your browser's storage. Saving to this database is done on your browser's onbeforeunload event (when this tab/window is closed or is refreshed). It will attempt to save around 10MB of three different sets of data. Which will show in the results section below if they in fact were saved and can be grabbed from your storage. "Did not get test data!" should appear three times on your first load.</p>
 		<p>There is <a href="http://lists.w3.org/Archives/Public/public-webapps/2012JanMar/0809.html">no known spec or consensus</a> for how this is supposed to happen, but since Indexed DB is asynchronous, one would expect the behavior to be that NO data would be saved, or that ALL data would be saved (storage functions processed on onbeforeunload could wait for finish). Currently, some data, can be saved, sometimes, depending on how fast your browser is, your hardware, how much data you are saving, and what browser function you are performing to initialize the onbeforeunload event. It's completely inconsistent.</p>
 		<h3>Results</h3>
 		<p id="results1">No results were found.</p>
 		<p id="results2"></p>
 		<p id="results3"></p>
 		<h3>Notes/Experiments</h3>
 		<p>Latest Chrome (37), will only be able to save the first set of data on a refresh, while closing the tab or window will allow enough time? to save more data (but not all), and only sometimes? Usually 2/3. Funilly enough, if this is run locally, even less can be saved. Running this same test on my 2013 Macbook Pro will allow all data to be stored, every time.</p>
 		<p>Similar situation with Firefox (33), except that on a close, it can usually get 3/3 - seems a bit faster.</p>
 		<p>Internet Explorer (11) can't seem to get anything saved in the onbeforeunload event.</p>
 		<h3>Solution</h3>
 		<p>There is none. There's no synchronous API for Indexed DB and localStorage is too small. Trying to prolong the onbeforeunload event with a blocking loop won't allow for any extra time for the saving to get done since it's also blocking the saving process. You may be able to create a work around by storing "some" data in localStorage, then updating it into Indexed DB on next load. But this will only work if you are storing small amounts of data. Sucks.</p>
 	</body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>IndexedDB onbeforeunload Test</title>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/idbwrapper/1.4.1/idbstore.min.js"></script>
	<script>
	var idb, i;
	var testData1 = [];
	var testData2 = [];
	var testData3 = [];

	for(i = 0; i < 40000; i++) {
	testData1[i] = { thing: 29398200928, anotherThing: "test", yetAnotherThing: true };
	}

	for(i = 0; i < 40000; i++) {
	testData2[i] = [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ];
	}

	for(i = 0; i < 80000; i++) {
	testData3[i] = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nisi neque, interdum consectetur est eu, interdum venenatis leo. Proin sapien ex, euismod vitae dolor quis, auctor egestas purus.";
	}

	window.onload = function() {
	idb = new IDBStore({
	dbVersion: 1.0,
	storeName: 'IDBTest',
	keyPath: null,
	autoIncrement: false,
	onStoreReady: function() {
	idb.get('testData1', function(value) {
	if (value) {
	document.getElementById("results1").innerHTML = "#1 Got test data!";
	} else {
	document.getElementById("results1").innerHTML = "#1 Did not get test data!";
	}
	});
	idb.get('testData2', function(value) {
	if (value) {
	document.getElementById("results2").innerHTML = "#2 Got test data!";
	} else {
	document.getElementById("results2").innerHTML = "#2 Did not get test data!";
	}
	});
	idb.get('testData3', function(value) {
	if (value) {
	document.getElementById("results3").innerHTML = "#3 Got test data! Since all data was recieved, the DB has been cleared for you to try again.";
	idb.clear();
	} else {
	document.getElementById("results3").innerHTML = "#3 Did not get test data!";
	}
	});
	}
	});
	};

	window.onbeforeunload = function() {
	idb.put('testData1', testData1);
	idb.put('testData2', testData2);
	idb.put('testData3', testData3);
	};
	</script>
	</head>

	<body>
	<h1>IndexedDB onbeforeunload Test</h1>
	<p>This page has just created (or attempted to create) an IndexedDB in your browser's storage. Saving to this database is done on your browser's onbeforeunload event (when this tab/window is closed or is refreshed). It will attempt to save around 10MB of three different sets of data. Which will show in the results section below if they in fact were saved and can be grabbed from your storage. "Did not get test data!" should appear three times on your first load.</p>
	<p>There is <a href="http://lists.w3.org/Archives/Public/public-webapps/2012JanMar/0809.html">no known spec or consensus</a> for how this is supposed to happen, but since Indexed DB is asynchronous, one would expect the behavior to be that NO data would be saved, or that ALL data would be saved (storage functions processed on onbeforeunload could wait for finish). Currently, some data, can be saved, sometimes, depending on how fast your browser is, your hardware, how much data you are saving, and what browser function you are performing to initialize the onbeforeunload event. It's completely inconsistent.</p>
	<h3>Results</h3>
	<p id="results1">No results were found.</p>
	<p id="results2"></p>
	<p id="results3"></p>
	<h3>Notes/Experiments</h3>
	<p>Latest Chrome (37), will only be able to save the first set of data on a refresh, while closing the tab or window will allow enough time? to save more data (but not all), and only sometimes? Usually 2/3. Funilly enough, if this is run locally, even less can be saved. Running this same test on my 2013 Macbook Pro will allow all data to be stored, every time.</p>
	<p>Similar situation with Firefox (33), except that on a close, it can usually get 3/3 - seems a bit faster.</p>
	<p>Internet Explorer (11) can't seem to get anything saved in the onbeforeunload event.</p>
	<h3>Solution</h3>
	<p>There is none. There's no synchronous API for Indexed DB and localStorage is too small. Trying to prolong the onbeforeunload event with a blocking loop won't allow for any extra time for the saving to get done since it's also blocking the saving process. You may be able to create a work around by storing "some" data in localStorage, then updating it into Indexed DB on next load. But this will only work if you are storing small amounts of data. Sucks.</p>
	</body>
	</html>