HTML5 ファイルシステムは強力な API です。パワーがあれば複雑さが伴います。複雑さが増すと、デバッグの煩わしさも増します。残念ながら、現在 Chrome の DevTools は Filesystem API をサポートしていません。これにより、デバッグが想定以上に難しくなります。難しいとは、ファイル システム内のファイルを一覧表示/削除するコードを記述する必要があるということです。
Filesystem API を試しているうちに、伝えたいヒントがいくつか見つかりました。各ヒントには独自の制限事項がありますが、組み合わせて使用すれば 90% の目標を達成できます。上位 5 件は次のとおりです。
file://から実行していないことを確認する。これは多くの人が遭遇する卑劣なものです。Chrome では、file://に大きなセキュリティ制限が適用されます。高度なファイル API の多く（BlobBuilder、FileReader、Filesystem API など）は、file://からアプリをローカルで実行すると、エラーをスローするか、通知なく失敗します。ウェブサーバーがない場合は、--allow-file-access-from-filesフラグを使用して Chrome を起動し、このセキュリティ制限を回避できます。このフラグはテスト目的でのみ使用してください。恐怖の
SECURITY_ERRまたはQUOTA_EXCEEDED_ERR。これは通常、データを書き込もうとしたときに#1 の影響を受ける場合に発生します。そうでない場合は、割り当てが不足している可能性があります。ファイル システムを開くことができる割り当てには、TEMPORARYとPERSISTENTの 2 種類があります。後者を使用する場合、ユーザーはアプリに永続ストレージを明示的に付与する必要があります。その方法については、こちらの投稿をご覧ください。filesystem:URL（FTW）。アプリの元のルートDirectoryEntryのfilesystem:URL を開くと便利です。これは何を意味するのでしょうか。たとえば、アプリがwww.example.comにある場合は、filesystem:http://www.example.com/temporary/を新しいタブで開きます。Chrome に、アプリの元の場所に保存されているファイルとフォルダの読み取り専用リストが表示されます。filesystem:URL について詳しくは、https://www.html5rocks.com/en/tutorials/file/filesystem/#toc-filesystemurls をご覧ください。chrome://settings/cookiesがあなたの友だちです。このページでは、オリジン用に保存されているデータをニュークできます。これには、データベース ストレージ、AppCache、Cookie、localStorage などの FileSystem API が含まれます。ただし、問題は「オール オア ナッシング」です。1 つのファイルまたはデータのみを削除することはできません。エラー コールバックを忘れないでください。Filesystem API は非同期環境で動作します（Worker で同期バージョンを使用している場合を除く）。API 呼び出しでは常にエラー コールバックを使用します。これらは任意ですが、後で事態が爆発したときに多くの悲しみを避けることができます。