localStorage causes browser to crash - html

Question

localStorageTest stores an incrementally increasing value in localStorage until it hits the localStorage size limits of the browser.
function localStorageTest(key, len) {
var value = window.localStorage.getItem(key);
value = (value == null)?"":value;
var numIters = len - value.length;
while(numIters--) {
value += "1";
window.localStorage.setItem(key, value);
if (window.localStorage.getItem(key) != value) {
console.log("limit reached at " + (value.length-1).toString() + " bytes");
break;
}
}
console.log("stored " + value.length + " bytes");
}
Chrome:
localStorageTest("1", 80000);
<browser crashed>
Firefox:
localStorageTest("1", 50000);
<browser crashed>
Suspecting an increased usage of browser memory, I wrote localStorageIncrementalTest which does the same thing as localStorageTest, but puts idle periods of 5 seconds in between its operations, using a setTimeOut call.
var increment = 5000;
function localStorageIncrementalTest(key, len) {
var value = window.localStorage.getItem(key);
value = (value == null)?"":value;
var numIters = len - value.length;
var limitReached = false;
while(numIters--) {
value += "1";
window.localStorage.setItem(key, value);
if (window.localStorage.getItem(key) != value) {
console.log("limit reached at " + (value.length-1).toString() + " bytes");
limitReached = true;
break;
}
}
console.log("stored " + value.length + " bytes");
if (!limitReached) {
setTimeout(function() {
localStorageIncrementalTest(key, len+increment);
}, 5000);
}
}
Chrome :
localStorageIncrementalTest("1", 30000);
stored 30000 bytes
stored 35000 bytes
...
stored 1800000 bytes
<browser crashed>
Firefox :
localStorageIncrementalTest("1", 30000);
stored 30000 bytes
stored 35000 bytes
...
stored 60000 bytes
<browser crashed>
So localStorageIncrementalTest allows us to store more in localStorage than localStorageTest before crashing the browser.
Can anyone explain the reasons behind the browser crash, and a possible solution to avoid the same ?
I'm using Chrome 28.0.1500.71, and Firefox 26.0
Update :
function getRandomValue(size) {
var value = "";
for (var i = 0; i < size; i++) {
value += Math.ceil(Math.random()*5);
}
return value;
}
function localStorageTest2() {
for (var i = 0; i < 70000; i++) {
window.localStorage.setItem("1", getRandomValue(20000));
}
}
Chrome :
localStorageTest2();
<browser crashed>
Firefox :
localStorageTest2();
<browser crashed>
Testing localStorage2 too caused the browser to crash.

Answer 1

I am not sure why the browsers crash, but it is worth reporting it at crbug.com and bugzilla.mozilla.com.
However, localStorage is not meant for this kind of usage. It is a synchronous API which puts a lot of strain on the browser when it is used, especially when it is used so frequently and will cause the page to perform badly in general.
Also, your test would not yield the right results - setItem(x, y) would throw an exception when you exceed the limit. localStorage.setItem(x, y); if (y == localStorage.getItem(x)) { ... } will never reach the if part, because it will throw an exception beforehand when the limit is reached.
The alternatives are simple variables, server storage or IndexedDB.
Chrome also has the FileSystem API and the Web SQL Databases API, but it is best not to rely on those, because they are not supported in other browsers.