如何使用 IndexedDB 制作一个很长的字符串而不会使浏览器崩溃

How can I make a really long string using IndexedDB without crashing the browser?

本文关键字：字符串 崩溃 浏览器 一个 IndexedDB 何使用      更新时间：2023-09-26

我正在编写一个 Web 应用程序，该应用程序会生成一个用户将下载的潜在大文本文件，并且所有处理都在浏览器中完成。到目前为止，我能够以小块读取超过 1 GB 的文件，处理每个块，以增量方式生成一个大型输出文件，并将不断增长的输出存储在 IndexedDB 中。我更天真的尝试将所有结果保存在内存中，然后在最后将它们序列化为一个文件，导致所有浏览器崩溃。

我的问题是双重的：

  1. 我可以附加到 IndexedDB 中的条目（字符串或数组）而不先将整个内容读入内存吗？现在，这个：

    task.dbInputWriteQueue.push(output);
var transaction = db.transaction("files", "readwrite");
var objectStore = transaction.objectStore("files");
var request = objectStore.get(file.id);
request.onsuccess = function()
{
    request.results += nextPartOfOutput
    objectStore.put(request.results);
};

    在输出开始变大后导致崩溃。我可以只将一堆小条目写入数据库，但无论如何我都必须将它们全部读入内存以连接它们。请参阅我问题的第 2 部分...

  2. 是否可以在不将该值加载到内存中的情况下创建数据对象 URL 来引用 IndexedDB 中的值？对于小字符串，我可以做：

    var url = window.URL.createObjectURL(new Blob([myString]), {type: 'text/plain'});

    但是对于大字符串，这不太好。事实上，它在加载字符串之前崩溃。似乎使用来自 IndexedDB 的get()进行大读取至少会导致 Chrome 崩溃（甚至开发人员工具崩溃）。

如果我使用 Blob 而不是字符串会更快吗？这种转换便宜吗？

基本上，我需要一种方法，使用 JavaScript，将一个非常大的文件写入磁盘，而无需在任何时候将整个文件加载到内存中。我知道你可以给createObjectURL一个文件，但这在我的情况下不起作用，因为我正在从用户提供的文件生成一个新文件。

存储 Blob 将使用更少的空间和资源，因为不再需要转换为 base64。您甚至可以将"文本/纯"对象存储为 blob：

var blob = new Blob(['blob object'], {type: 'text/plain'});
var store = db.transaction(['entries'], 'readwrite').objectStore('entries');
// Store the object  
var req = store.put(blob, 'blob');
req.onerror = function(e) {
    console.log(e);
};
req.onsuccess = function(event) {
    console.log('Successfully stored a blob as Blob.');
};

您可以在此处查看更多信息：https://hacks.mozilla.org/2012/02/storing-images-and-files-in-indexeddb/

Chrome 仅在 2014 年夏季开始支持此功能：http://updates.html5rocks.com/2014/07/Blob-support-for-IndexedDB-landed-on-Chrome-Dev 因此您无法在旧版本的 Chrome 上使用它。

我刚刚重新打开了 2 年前提交的 Chrome 错误，并为 FF 团队创建了另一个错误，与创建大型 blob 时的浏览器崩溃有关。生成大文件对于浏览器来说应该不是问题。

相关文章：