javascript エラー「QuotaExceededError: The quota has been exceeded.」の解決方法

作成日 2022.08.12
javascript
javascript

javascriptで、エラー「QuotaExceededError: The quota has been exceeded.」が発生した場合の原因と解決方法を記述してます。

1. 環境
2. エラー内容
3. 原因
4. 解決方法

環境

OS macOS Big Sur
ブラウザ safari 15.5

Javascript サンプル集はこちら

エラー内容

以下の、ランダムなkey名で「sessionStorage」にデータを100万件登録するコードで発生

// 保存するオブジェクト
const obj = {
    str1: 'Hello',
    str2: 'World',
    str3: '!!',
};

// オブジェクトをjsonに変換
const txt = JSON.stringify(obj);

let str = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";

for (let i = 0; i < 1_000_000; i++) {

    let randstr = '';

    for (let i = 0; i < 10; i++) {
        randstr += str[~~(Math.random() * str.length)];
    }

    // jsonデータをsessionStorageに保存
    sessionStorage.setItem(randstr, txt);

}

エラーメッセージ

QuotaExceededError: The quota has been exceeded.

画像

原因

「sessionStorage」の容量を超えて、データを登録しようとしているため

解決方法

「try-catch」でエラー発生時に処理を停止する

// 保存するオブジェクト
const obj = {
    str1: 'Hello',
    str2: 'World',
    str3: '!!',
};

try {

for (let i = 0; i < 1000; i++) {

    let randstr = '';

    for (let i = 0; i < 100_000; i++) {
        randstr += str[~~(Math.random() * str.length)];
    }

    // jsonデータをsessionStorageに保存
    sessionStorage.setItem(randstr, txt);

}

}
catch (e) {
    console.log("データがいっぱいになりました。");
}

console.log("処理完了");

実行結果