即使浏览器内存和会话过期，如何保持localStorage中的blobURL有用? [英] How to keep a blobURL from localStorage useful even if browser memory and session expires?

问题描述

我发现

现在，根据这篇文章上的公认答案，执行卸载文档清理步骤" ...在浏览器会话到期时，这就是为什么在后续会话中无法访问blobURL目标的原因."

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

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

更新:就像@Kaiido在下面说的一样，我使用了localforage.但是我无法使我的代码正常工作.请在此处进行查看.请帮忙.

解决方案

对于JS和响应blob://，URL只是一个字符串，所以您保存的只是一个字符串.

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

也就是说，直到该blob://网址被撤消为止.

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

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

---

因此，对于解决方案，请使用 IndexedDB ，可以将Blob直接存储在用户磁盘上.

有了像 localForage 这样的库，

  localforage.setItem("myfile"，blob); 

保存，并且

  await localforage.getItem(" myfile"); 

找回它.

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

I found this article which teaches how to record an mp3 in your computer using ReactJS. So I copied it and refactored it a little here. After refactoring it into a functional component on stackblitz, I copied it on my original code. Afterwards, I implemented Redux to save the state and also persisted the blobURL on localStorage so that even if I refresh, it could still find it and play it.

It worked, but after refreshing in about 30 secs, it cannot be found already (even though it's in LS and even though the whole state is also persisted to LS). I keep on getting this error:

Now, according to the accepted answer on 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."

Is this the reason why the browser can't find the blobURL for the recorded mp3 and can't play it anymore? If so, how do I work my way around it?

If this isn't the reason, what is? And how do I work my way around it?

UPDATE: I used localforage just like what @Kaiido said below. But I can't get my code to work. Please take a look at it here. Please help.

解决方案

For JS and react a blob:// URL is just a string, so what you saved is just a string.

However for the browser this string is actually a real pointer to the object that has been used to create it.
Now, for this relation to work, the browser has to keep the object in memory, so that when it tries to fetch the resource it can find it.

That is, until this blob:// URL is revoked.

The revocation can happen either by explicitly calling URL.revokeObjectURL( blobURL ) or when the Document that did create this blob:// URL is unloaded.

After the link has been revoked, the associated object can finally get Garbage Collected, and it's a very good thing, because we wouldn't want browsers to keep around Blobs that can be GBs big to stay in the memory even after a page reload.
Now, the link becomes a simple string again, just like if you removed the resource from the server.
They can't do otherwise because they can't know what happens to the string URL. You could store it in localStorage, on a server, or even just write it down on a paper — obviously they can't detect when it's safe to remove the data from memory in these conditions.
There is actually a better API in the specs: srcObject. It currently only concerns HTMLMediaElements, but it's planned to extend it to other elements loading resources. But anyway, while in the specs, no browser has implemented it yet for Blobs...

---

So for a solution, use IndexedDB, which can store Blobs directly on the user's disk.

With a library like localForage it simply becomes

localforage.setItem( "myfile", blob );

to save, and

await localforage.getItem( "myfile" );

to get it back.

Now you can playback that saved file by rebuilding a new blob:// URL.

这篇关于即使浏览器内存和会话过期，如何保持localStorage中的blobURL有用?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！