localStorageのサイズ制限エラーに対処する

localStorageの5MB制限エラーを解決！QuotaExceededErrorの具体的な対処法と実装例を解説。try-catchを使ったエラーハンドリングで、ストレージ容量オーバー時のユーザー体験を改善する方法を紹介します。

Web Storage APIにあるlocalStorageをよく使うのですが、5MBなどのサイズ制限があり、これに対処する方法についての記事がなかったので調べてみました。

エラー詳細

localStorageでサイズ制限にひっかかると以下のエラーコードが出力されます（Chrome）。

エラー名

error.name: QuotaExceededError

エラーコード

error.code: 22

エラーメッセージ

error.message: Uncaught DOMException: Failed to execute 'setItem' on 'Storage': Setting the value of 'foo_key_name' exceeded the quota.

（foo_key_name はキーの名前です。）

参考（MDN）：

DOMException - Web API | MDN

対処するコード

function saveToLocalStorage(key, value) {
    try {
        localStorage.setItem(key, value);
    } catch (e) {
        if ((e instanceof DOMException && (e.code === 22 || e.code === 1014 || e.name === 'QuotaExceededError')) ||
            (e.name === "NS_ERROR_DOM_QUOTA_REACHED" && localStorage && localStorage.length !== 0)) {
            // 制限に引っかかった場合の処理
            console.error(e);
            alert("保存に失敗しました: ストレージの容量制限を超えています。");
        } else {
            // その他のエラーの場合の処理
            console.error("保存に失敗しました: 不明なエラーです。", e);
            alert("保存に失敗しました: 不明なエラーです。");
        }
    }
}

// 使用例
saveToLocalStorage('foo_key_name', '何か大きなデータ');

このコードでは、ローカルストレージにデータを保存する関数として**saveToLocalStorage()**を定義しています。

この関数は**keyとvalueを引数に取り、setItem**が成功するか、またはエラーが発生した場合にそれをキャッチして適切なメッセージを表示します。

中でも、ローカルストレージの容量制限を超えることを示すエラーコードまたはエラー名が返された場合には、ユーザーに対してストレージ制限に達したという内容をアラートします。

なお、QuotaExceededErrorはChromeのエラー名で、NS_ERROR_DOM_QUOTA_REACHEDはFirefoxのエラーです。