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

时间:2015-08-04 07:39:21

标签: javascript html5 blob filereader indexeddb

现在大多数浏览器都支持IndexedDB直接将数据/文件存储为文件 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)

文件可能是图片或非常小的视频。

1 个答案:

答案 0 :(得分:6)

我建议使用Blob for images&amp;视频作为API非常简单,可以下载为blob并保存到db,以及从db检索并为src属性创建URL

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