即使浏览器内存和会话过期，如何保持本地存储中的 blobURL 有用？

Question

我找到了this article，它教授如何使用 ReactJS 在您的计算机中录制 mp3。所以我复制了它并稍微重构了它here。在 stackblitz 上将其重构为功能组件后，我将其复制到我的原始代码中。之后我实现了 Redux 来保存状态，还在localStorage 上持久化了blobURL，这样即使我刷新，它仍然可以找到并播放它。

它起作用了，但是在大约 30 秒刷新后，它已经找不到（即使它在 LS 中并且即使 整个状态 也被持久化到 LS）。我不断收到此错误：

现在，根据this post、"'the unloading document cleanup steps are executed' ... when the browser session expires, which is why the target of your blobURL can't be accessed in subsequent sessions." 上接受的答案

这就是为什么浏览器找不到录制的mp3的blobURL无法播放的原因吗？如果是这样，我该如何解决？

如果这不是原因，那是什么？我该如何解决？

更新： 我使用 localforage 就像@Kaiido 下面所说的那样。但我无法让我的代码工作。请看一下here。请帮忙。

Answer 1

对于 JS 和 react 一个 blob:// URL 只是一个字符串，所以你保存的只是一个字符串。

但是对于浏览器来说，这个字符串实际上是一个真正的指针，指向用来创建它的对象。
现在，为了使这种关系起作用，浏览器必须将对象保存在内存中，以便在尝试获取资源时可以找到它。

也就是说，直到这个 blob:// URL 被撤销。

可以通过显式调用 URL.revokeObjectURL( blobURL ) 或在卸载创建此 blob:// URL 的 Document 时进行撤销。

链接被撤销后，关联的对象终于可以被垃圾回收了，这是一件非常好的事情，因为我们不希望浏览器保留可能是 GB 大的 Blob，即使经过页面重新加载。
现在，链接再次变成了一个简单的字符串，就像您从服务器中删除了资源一样。
他们不能这样做，因为他们不知道字符串 URL 会发生什么。您可以将其存储在 localStorage 中、服务器上，甚至只是将其写在纸上 — 显然，在这些情况下，他们无法检测到何时可以安全地从内存中删除数据。
规范中实际上有一个更好的 API：srcObject。它目前只涉及 HTMLMediaElements，但计划将其扩展到其他元素加载资源。但无论如何，虽然在规范中，还没有浏览器为 Blob 实现它......

---

所以对于一个解决方案，使用IndexedDB，它可以将Blobs直接存储在用户的磁盘上。

有了像localForage 这样的库，它就变成了

localforage.setItem( "myfile", blob );

保存，并且

await localforage.getItem( "myfile" );

把它拿回来。

现在您可以通过重建新 blob:// URL 来播放保存的文件。