即使浏览器内存和会话过期,如何使 localStorage 中的 blobURL 仍然有用?

IT技术 reactjs local-storage blob mp3
2021-05-09 20:18:57

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

它起作用了,但是在大约 30 秒后刷新后,它已经找不到了(即使它在 LS 中,即使整个状态也持久化到 LS)。我不断收到此错误:

在此处输入图片说明

现在,根据这个帖子上接受的答案"'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."

这就是浏览器找不到blobURL录制的mp3并且无法播放的原因吗?如果是这样,我该如何解决它?

如果这不是原因,那是什么?我该如何解决这个问题?

更新: 我像下面@Kaiido 所说的那样使用了 localforage。但我无法让我的代码工作。请看这里请帮忙。

1个回答

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

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

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

撤销可以通过显式调用URL.revokeObjectURL( blobURL )或在卸载创建此 blob:// URL 的文档时发生

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


所以作为一个解决方案,使用IndexedDB,它可以直接在用户的磁盘上存储 Blob。

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

localforage.setItem( "myfile", blob );

保存,和

await localforage.getItem( "myfile" );

把它拿回来。

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