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

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

DOMException インターフェイスは、Web API のメソッドの呼び出しやプロパティへのアクセスによって異常なイベント（例外と呼ばれます）が発生したことを表します。これは基本的に、Web API 内部のエラーの状態を示すものです。

developer.mozilla.org

対処するコード

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のエラーです。

参考（MDN）：

ウェブストレージ API の使用 - Web API | MDN

ウェブストレージ API は、ブラウザーがキーと値のペアを安全に保存できる仕組みを提供します。

developer.mozilla.org

まとめ

このようにコードを書けばサイズ制限にもきれいに対応できるでしょう。