javascript - 如何在不使浏览器崩溃的情况下使用 IndexedDB 制作一个非常长的字符串？

Question

我正在编写一个 Web 应用程序，它会生成一个可能很大的文本文件供用户下载，所有处理都在浏览器中完成。到目前为止，我能够以小块的形式读取超过 1 GB 的文件，处理每个 block ，逐步生成一个大的输出文件，并将不断增长的输出存储在 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'});
   

   但是对于大字符串来说，这并不太好。事实上，它在加载字符串之前就崩溃了。使用 get() 从 IndexedDB 进行大量读取似乎至少会导致 Chrome 崩溃(甚至开发者工具也会崩溃)。

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

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

Answer 1

存储 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/

自 2014 年夏季以来，Chrome 才支持此功能:http://updates.html5rocks.com/2014/07/Blob-support-for-IndexedDB-landed-on-Chrome-Dev所以你不能在旧版本的 Chrome 上使用它。