SkyBeje開発記

SkyWayを使ったブラウザ間通信アプリを開発しています

ChromeのIndexedDB(2.0)に、限界までデータを登録してみました


 開発しているサービスでIndexedDBを使用しているのですが、現状のChromeの場合、どのくらいまでの容量を登録できるのか、また限界までデータ登録した場合、どのような動きになるのか不明だった為、検証してみました。

IndexedDB 2.0とは

 ブラウザに実装されているデータベースです。
 Indexed Database API 2.0 (日本語訳)

IndexedDBに限界までデータを登録してみました

 IndexedDBに、大容量データを登録できるサイトを作成して検証しました。
 https://skybeje.net/indexeddb_limit_test/  

 一応ソースはGitHubに置きました。
 https://github.com/iwatendo/Indexeddb_limit_test

 こんな感じです。
f:id:iwatendo:20180214235320p:plain

 

エラーハンドリングについてのメモ

 上記を作っていて、気がついた点のメモです。
 ・データ登録できなかった場合、DBRequest側のエラーは発生しない。
 ・データ登録できなかった場合、DBTransactionの「onAbort」が呼ばれる。
 ・その際に DBTransaction.errorに「QuoteExceededError」がセットされます。

検証してわかった事

 ・一定容量を超えると、IndexedDBにデータ登録できなくなる。
 ・IndexedDBに登録できるデータ量は、環境によって変化する。
 ・1つのサイトで限界までIndexedDBに登録しても、他サイトに影響は無い様子。

検証内容の詳細

 ストレージの容量が関係するらしいので、
 4台のPC(うち一台はタブレット)で、ストレージを確認しつつ検証しました。

f:id:iwatendo:20180214235643p:plain

1台目 Windwos10 Home(64bit) Version 1709  /  Chrome Version 64.0.3282.167

 ストレージ  Cドライブ 185G (残 64G) / Dドライブ 250GB(残 246GB)
 約12GBで QuoteExceededError が発生

 別ドメインにもテストサービスを配置して確認したところ、こちらも約12GBでQuoteExceededError が発生。最初に登録したサイトの12GBのデータは残ったままで、合計24GBのデータ登録できことになります。
 また、念の為Dドライブを外して試しましたが結果は同じでした。

2台目 MacOS High Sierra 10.13.3  / Chrome Version 64.0.3282.167

 ストレージ 121GB / 残 73GB
 約7GBで QuoteExceededError 発生
 こちらも別ドメインで、さらに7GB登録できる事を確認

3台目 Ubunth 16.04(スティックPC)/ Chrome Version 64.0.3282.167

 ストレージ 26GB / 残 16GB
 約1.1GBで QuoteExceededError 発生 

4台目 Android 7.1.1 ( タブレット / Nexus9 )/ Chrome Version 64.0.3282.137

 ストレージ14.56GB / 残 7.43GB
 約 688 MBで QuoteExceededError 発生  

Chrome  Developer Tools のクラッシュについてのメモ

  IndexedDBに大容量データを登録しても問題なく使用できる事は確認しましたが、大容量データを登録したテーブルを、Developer Toolsで確認しようとすると、以下のようなメッセージが表示され、ブラウザがクラッシュする場合があるようです。

f:id:iwatendo:20180215100638p:plain

 ※メモリ8GBのPCに、128MB×50件=6.4GBのデータを登録して確認した時に発生。

 

IndexedDBの保存先についてのメモ

 Windowsの場合、以下の場所に保存されるようです。
 C:\Users\(ユーザー名)\AppData\Local\Google\Chrome\User Data\Default\IndexedDB

 参考サイト:ChromeのIndexedDBの場所 (Mac・Windows) | EasyRamble


 私は普段 Visual Studio Code + Debugger for Chromeで開発していますが
 その場合の保存先は、以下の場所になるようです。

 C:\Users\(ユーザー名)\AppData\Local\Temp\vscode-chrome-debug-userdatadir_9222\Default\IndexedDB

 ※数値部分は環境によって変わるかもしれません。

IndexedDBの手動削除について

 前述のフォルダの下に、更にサイト毎にフォルダが生成されます。
 http(s)_(URL)_(port番号).indexeddb.leveldb

 一定サイズを超えるバイナリ(ArrayBuffer等)の場合は、blobに保存されます。
 http(s)_(URL)_(port番号).indexeddb.blob

 普段は特に意識する必要は無いと思いますが、今回いろいろ試してる際に Chrome側からテーブルを削除しても blobデータが消えない現象が発生しました。
 
 仕方ないのでChromeを落とした状態で、手動でフォルダ(.leveldbと.blobの両方)を削除してみたところ、特に問題なく削除できました。あまり推奨はできませんが、同じような現象が発生した場合に、手動で削除してみても良いかもしれません。

さいごに

  IndexedDBに大容量のデータを登録しても大丈夫かな?という漠然とした不安があったのですが、今回の検証で、まぁ大丈夫そうという印象になりました。他のブラウザでは検証してないですが、少なくてもChromeの場合は安定動作する感じです。
 
 というわけで、今後もIndexedDBをガンガン使っていきたいと思います。

2018/03/07 追記

 Google Chromeの場合、Developer Toolsで確認できるようになったみたいです。

f:id:iwatendo:20180307080711p:plain