localStorage導致瀏覽器崩潰

localStorageTest在localStorage中存儲遞增值，直到達到瀏覽器的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，但提出的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>

火狐：

localStorageIncrementalTest("1", 30000); 
stored 30000 bytes 
stored 35000 bytes 
... 
stored 60000 bytes 
<browser crashed>

所以localStorageIncrementalTest使我們能夠比localStorageTest在更多的localStorage存儲崩潰的瀏覽器。

任何人都可以解釋瀏覽器崩潰背後的原因，並避免相同的可能的解決方案？

我使用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也導致瀏覽器崩潰。

來源

2014-02-11 Bharat Khatri

我不確定爲什麼瀏覽器會崩潰，但值得在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數據庫API，但最好不要依賴這些API，因爲它們在其他瀏覽器中不受支持。

來源

2014-03-29 16:44:07 PhistucK

localStorage導致瀏覽器崩潰

回答

相關問題