localStorage导致浏览器崩溃

Question

localStorageTest在localStorage中存储一个递增的值，直到达到浏览器的localStorage大小限制为止。

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");
}

铬：

localStorageTest("1", 80000);
<browser crashed>

Firefox：

localStorageTest("1", 50000);
<browser crashed>

由于怀疑浏览器内存的使用量增加，我编写了localStorageIncrementalTest，它与localStorageTest做同样的事情，但在操作之间放置5秒的空闲时间，使用setTimeOut调用。

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

铬：

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>

因此，在浏览器崩溃之前，localStorageIncrementalTest允许我们在localStorage中存储比localStorageTest更多的内容。

有人能解释一下造成浏览器崩溃的原因，以及避免这种情况的可能解决方案吗？

我使用的是Chrome 28.0.1500.71和Firefox 26.0

更新：

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

铬：

localStorageTest2();
<browser crashed>

Firefox：

localStorageTest2();
<browser crashed>

测试localStorage2也会导致浏览器崩溃。

Answer 1

我不知道为什么浏览器会崩溃，但值得在crbug.com和bugzilla.mozilla.com上报告。

然而，localStorage并不适合这种使用。它是一个同步API，当它被使用时，会给浏览器带来很大的压力，特别是当它被如此频繁地使用时，通常会导致页面表现不好。

而且，您的测试不会产生正确的结果--当您超过限制时，setItem(x, y)会抛出一个异常。localStorage.setItem(x, y); if (y == localStorage.getItem(x)) { ... }永远不会到达if部件，因为当达到极限时，它会提前抛出异常。

替代方案是简单变量、服务器存储或IndexedDB。

Chrome还有FileSystem API和，但最好不要依赖这些API，因为其他浏览器不支持它们。