IndexedDBの容量超過時の動作確認のやり方 (Chrome)
要約
- Chromeのdevツール->Application->StorageよりSimulate custom storage quotaにcheckをつける
- MB単位で割り当て上限を指定できる
目的
indexedDBを使用する際に大量にデータを保存するなどして,クライアント側の容量超過を引き起こしてしまう場合がある.超過が起こった際にアプリケーションがどのような動作をするのか確認するためにChromeの機能を利用して容量超過した場合の動作を確認してみる.
indexedDBとは
IndexedDB は、ファイルや blob を含む構造化された多くのデータを保存する、クライアントサイドのローレベル API です。この API は高パフォーマンスなデータの検索を行うために、インデックスを使用します。Web Storage は比較的少量のデータを保存するのに有用ではありますが、構造化された非常に多くのデータを扱うには不十分です。IndexedDB が解決策を提供します。本ページは、MDN における IndexedDB のランディングページです。ここでは API リファレンスへのリンク、使用ガイド、ブラウザーのサポート状況、主要なコンセプトの説明を掲載します。
- より引用
データをブラウザに保持したい場合に使用する.Key-Value形式のデータベースです.
容量超過を確認する
Chromeのdevツールを開いて、Applicationタブを押したあと左側にあるStorageのボタンを押します.
Simulate custom storage quotaに上限とする容量を入力します.
今回は容量超過した場合の動作確認を行うため0.001MBと入力.
この値が上限容量としてシミュレーションすることができるため,容量を超えた場合のエラーを確認することができます.
実際にindexedDBにデータを挿入する処理を書いて動作させてみます.
今回はdexie.jsと呼ばれるindexedDBのWrapperを用いてテストしてみました.
import Dexie from "dexie"
const db = new Dexie("friend_database");
db.version(1).stores({
friends: 'name,shoeSize'
});
for(let i = 0;i < 20;i++) {
const name = Math.random().toString(32).substring(2);
console.log(i, name)
db.friends.put({name: name, shoeSize: 8}).then(function (friend) {
console.log("ok");
}).catch(function(error) {
console.log(error);
});
}
以上のファイルをbundleしてES5形式にしてからブラウザに読み込ませます.
目的通りQuotaExceededErrorを引き起こすことができました.
無事にこの方法を使用して容量を超えた場合の処理を確認することができました.
エラーの際にはlocalstorageを使用する,もしくは別の対策をたてて容量超過してしまった場合の対策をたてましょう.
Discussion