Benchmarking localStorage in small big versus big small

bench.html

<script>
// Store and retrieve 1000 100-byte items. Then store and retrieve 10 10000-byte item
let test = (numBlocks, byteSze) => {

	let bytes = 'a';

	for (let i = 0; i < byteSze; i++) {
		bytes += 'a';
	}

	for (let i = 0; i < numBlocks; i++) {
		localStorage.setItem(`test${i}`, bytes);
	}

	for (let i = 0; i < numBlocks; i++) {
		localStorage.getItem(`test${i}`);
	}
}

test(1000, 100);
localStorage.clear();
// Run this once, record the data, then comment the stuff above, uncomment the stuff below, and run again
// test(10, 10000);
// localStorage.clear();

</script>

Turns out that doing a lot of retrievals of small localStorage items is less efficient than doing fewer retrievals of large localStorage items. The takeaway is that if you have the choice of storing 10 items in localStorage separately versus in a conglomerate object, the latter is a better idea from a performance standpoint.

Here are my results on Chrome 52 on a late 2015" MBP with 16GB RAM and 256GB SSD running El Capitan.

The results of test(1000, 100)

The results of test(10, 10000)