即使浏览器内存和会话过期，如何保持 localStorage 中的 blobURL 有用？
How to keep a blobURL from localStorage useful even if browser memory and session expires?
我找到了 this article which teaches how to record an mp3 in your computer using ReactJS. So I copied it and refactored it a little here。在 stackblitz 上将其重构为功能组件后，我将其复制到我的原始代码上。后来我实现了Redux来保存状态，还把blobURL持久化到localStorage上，这样即使我刷新了，它也能找到播放
它成功了，但是在大约 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，无法播放的原因吗？如果是这样，我该如何解决？
如果这不是原因，那是什么？我该如何解决它？
更新：
我像下面@Kaiido 所说的那样使用了 localforage。但我无法让我的代码工作。请看一下here。请帮忙
对于JS和react a blob:// URL只是一个字符串，所以你保存的只是一个字符串。
但是对于浏览器来说，这个字符串实际上是一个指向用于创建它的对象的真实指针。
现在，为了使这种关系起作用，浏览器必须将对象保存在内存中，以便在尝试获取资源时能够找到它。
也就是说，直到这个 blob:// URL 被撤销。
撤销可以通过显式调用 URL.revokeObjectURL( blobURL ) 或当创建此 blob:// URL 的文档被卸载时发生。
在link被撤销之后，关联的对象终于可以得到垃圾收集，这是一件非常好的事情，因为我们不希望浏览器保留可以大到GB的Blob。即使在页面重新加载后，也会在内存中。
现在，link 又变成了一个简单的字符串，就像您从服务器上删除了资源一样。
他们别无选择，因为他们不知道字符串 URL 会发生什么。您可以将其存储在 localStorage 中、服务器上，甚至只是将其写在纸上 — 显然，在这些情况下，它们无法检测何时可以安全地从内存中删除数据。
规格中实际上有一个更好的 API：srcObject。目前只涉及HTMLMediaElements，但计划扩展到其他元素加载资源。但是无论如何，在规范中，还没有浏览器为 Blobs 实现它...
所以对于解决方案，使用IndexedDB，它可以将 Blob 直接存储在用户的磁盘上。
有了像 localForage 这样的库，它就变成了
localforage.setItem( "myfile", blob );
保存，
await localforage.getItem( "myfile" );
取回它。
现在您可以通过重建 new blob:// URL.
来播放保存的文件
我找到了 this article which teaches how to record an mp3 in your computer using ReactJS. So I copied it and refactored it a little here。在 stackblitz 上将其重构为功能组件后，我将其复制到我的原始代码上。后来我实现了Redux来保存状态，还把blobURL持久化到localStorage上，这样即使我刷新了，它也能找到播放
它成功了，但是在大约 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，无法播放的原因吗？如果是这样，我该如何解决？
如果这不是原因，那是什么？我该如何解决它？
更新： 我像下面@Kaiido 所说的那样使用了 localforage。但我无法让我的代码工作。请看一下here。请帮忙
对于JS和react a blob:// URL只是一个字符串，所以你保存的只是一个字符串。
但是对于浏览器来说，这个字符串实际上是一个指向用于创建它的对象的真实指针。
现在，为了使这种关系起作用，浏览器必须将对象保存在内存中，以便在尝试获取资源时能够找到它。
也就是说，直到这个 blob:// URL 被撤销。
撤销可以通过显式调用 URL.revokeObjectURL( blobURL ) 或当创建此 blob:// URL 的文档被卸载时发生。
在link被撤销之后，关联的对象终于可以得到垃圾收集，这是一件非常好的事情，因为我们不希望浏览器保留可以大到GB的Blob。即使在页面重新加载后，也会在内存中。
现在，link 又变成了一个简单的字符串，就像您从服务器上删除了资源一样。
他们别无选择，因为他们不知道字符串 URL 会发生什么。您可以将其存储在 localStorage 中、服务器上，甚至只是将其写在纸上 — 显然，在这些情况下，它们无法检测何时可以安全地从内存中删除数据。
规格中实际上有一个更好的 API：srcObject。目前只涉及HTMLMediaElements，但计划扩展到其他元素加载资源。但是无论如何，在规范中，还没有浏览器为 Blobs 实现它...
所以对于解决方案，使用IndexedDB，它可以将 Blob 直接存储在用户的磁盘上。
有了像 localForage 这样的库，它就变成了
localforage.setItem( "myfile", blob );
保存，
await localforage.getItem( "myfile" );
取回它。
现在您可以通过重建 new blob:// URL.
来播放保存的文件