web-dev-qa-db-ja.com

IndexedDB：ファイルをFile、Blob、またはArrayBufferとして保存します。最良の選択肢は何ですか？

現在、ほとんどのブラウザはIndexedDBをサポートしており、データ/ファイルをFile、Blob、またはArrayBufferとして直接保存します。

このコードは、IDBキー 'File1'をFileとして保存します。

<input type="file" id="userfile" />
var a = document.getElementById("userfile");
var b = a.files[0];

これで、次のコードを使用して、このファイルをIDBに直接保存できます。

//LocalForage is a library for indexedDB developed by Mozilla
//Note: localforage._config.driver=asyncStorage (IDB method)
function run(){
  //"File1" = IDB data table key and b=value
  localforage.setItem("File1", b, function(err, value) {
    console.log(err)
  });
}

a.onchange = function(){
  run()
}

このコードは、IDBキー 'BlobFile'をBlobとして保存します。

mb = new Blob([b],{type:b.type});

function runB(){
  localforage.setItem("BlobFile", mb, function(err, value){
    console.log(err)
  });    
}

a.onchange = function(){
  runB()
}

ファイルをIDBに保存するためのベストプラクティスを知りたいです。 （File/Blob/ArrayBuffer）

ファイルは画像または非常に小さいサイズのビデオである可能性があります。

javascripthtmlblobfilereaderindexeddb
21
Ankit_Shah55

これは議論の余地のある問題ですが、ここに描くことができるいくつかの線があります。ここでMDNを引用しています。

ファイルインターフェイスはBlobに基づいており、blob機能を継承し、ユーザーのシステム上のファイルをサポートするように拡張します。

したがって、ファイルとblobの間では、必要な機能の問題です（もう少し便利なので、私の好みはblobです）。

現在、blobとArrayBufferの間で、これは必要なものに完全に依存するため、注意が必要です。ArrayBufferは場合によっては非常に役立ちますが、構造化されており、

バイナリデータ用の固定長コンテナ

したがって、ファイルサイズは大きな違いを生む可能性があります。

もう1つの大きなポイントは、ArrayBufferがメモリ内にあるのに対し、blobはディスクまたはメモリのどこにでも配置できるため、blobを使用すると、オーバーヘッドを大幅に削減できる可能性があります。したがって、あなたの場合、imho、blobが勝ちます。

ちなみに、あなたが何をしようとしているのか正確にはわかりませんが、ターゲットがファイルの内容全体にインデックスを付けてクエリを実行しているのでない限り、ファイル全体をデータベースに保存することはお勧めできません。デバイスはそのタイプの過負荷を処理できるため、コンテンツが必要ない場合は、ファイル名のみにインデックスを付けると、時間とストレージスペースを節約できます。

これがお役に立てば幸いです。

6
Labib Ismaiel

APIはblobとしてダウンロードしてdbに保存するだけでなく、dbから取得してsrc属性のURLを作成するのもかなり簡単なので、画像と動画にはBlobを使用することをお勧めします。

実装については、こちらのサンプルを確認してください https://hacks.mozilla.org/2012/02/storing-images-and-files-in-indexeddb/

6
gafi