IndexedDB:将文件存储为File或Blob或ArrayBuffer.什么是最好的选择？

Question

现在大多数浏览器都支持IndexedDB将数据/文件直接存储为File,Blob或ArrayBuffer.

此代码将IDB密钥"File1"保存为文件

<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的最佳做法是什么.(文件/斑点/ ArrayBuffer)

文件可以是图像或非常小的视频.

Answer 1

我建议将Blob用于图像和视频,因为API可以非常简单地下载为blob并保存到db,以及从db检索并为src属性创建URL

请在此处查看此示例以获取实施 https://hacks.mozilla.org/2012/02/storing-images-and-files-in-indexeddb/

Answer 2

这是一个有争议的问题,但我们可以在这里绘制一些代码,我在这里引用MDN:

File接口基于Blob,继承blob功能并将其扩展为支持用户系统上的文件.

所以在文件和blob之间,这是一个需要的功能问题(我的偏好是blob,因为它更方便).

现在在blob和ArrayBuffer之间,这个很棘手,因为它完全取决于你需要什么,ArrayBuffer在某些情况下非常有用,但它是一个结构化的,它是一个

用于二进制数据的固定长度容器

所以你的文件大小可以产生巨大的差异.

另一个重点是,ArrayBuffer是内存中的,而blob可以是任何地方,磁盘或内存,所以使用blob你可能会减少很多.所以对于你的情况,imho,blob获胜.

现在请注意,我不知道你要做什么,但是将整个文件存储在数据库中并不是一个好主意,除非你的目标是索引整个文件内容并查询它,因为,并非所有用户设备可以处理这种类型的过载,因此,如果您不需要内容,只索引文件名,它可以节省时间和存储空间.

我希望这有帮助.