IndexedDB：将文件存储为 File 或 Blob 或 ArrayBuffer。啥是最好的选择？

Posted 2023-02-15

【中文标题】IndexedDB：将文件存储为 File 或 Blob 或 ArrayBuffer。啥是最好的选择？

【英文标题】：IndexedDB: Store file as File or Blob or ArrayBuffer. What is the best option?IndexedDB：将文件存储为 File 或 Blob 或 ArrayBuffer。什么是最好的选择？

【发布时间】：2015-10-26 12:12:39

【问题描述】：

现在大多数浏览器都支持 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 的最佳做法是什么。 （文件/Blob/ArrayBuffer）

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

【参考方案1】：

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

在此处查看此示例以了解实施情况 https://hacks.mozilla.org/2012/02/storing-images-and-files-in-indexeddb/

【参考方案2】：

这是一个值得商榷的问题，但我们可以在这里划定一些界限，我在这里引用 MDN：

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

所以在文件和 blob 之间，这是需要功能的问题（我更喜欢 blob，因为它更方便一点）。

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

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

因此您的文件大小可以产生巨大的影响。

另一个重点是，ArrayBuffer 是在内存中的，而 blob 可以是任何位置，磁盘或内存，因此使用 blob 可能会大大减少开销。 所以对于你的情况，恕我直言，blob 赢了。

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

我希望这会有所帮助。

【讨论】：

让我解释一下。我将存储高达 2.5 Mb 的小图像和高达 16 Mb 的视频。它将仅存储一周，每个用户的最大配额为 50-75 Mb。

首先我不知道为什么我被否决了，请留下评论解释你发现了什么错误。回到问题上来，使用 blob，不要使用其他东西，50Mb 对于单个选项卡来说是很长一段时间的大量内存开销，blob 将为您提供使用磁盘空间的选项，这更可行。

顺便说一句，看看这个msdn.microsoft.com/en-us/library/hh779017(v=vs.85).aspx，MDN 上有很多资源可能对你有很大帮助

我一直在存储和检索 dataurl 的。我不明白 blob 实际上是什么......？