localStorage 导致浏览器崩溃答案

【问题标题】：localStorage causes browser to crashlocalStorage 导致浏览器崩溃
【发布时间】：2014-03-09 11:22:31
【问题描述】：

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>

火狐：

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

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

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>

火狐：

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>

火狐：

localStorageTest2();
<browser crashed>

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

【问题讨论】：

标签： html google-chrome firefox local-storage

【解决方案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 和 Web SQL Databases API，但最好不要依赖它们，因为其他浏览器不支持它们。

【讨论】：