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

対処するコード

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

まとめ

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