JavaScript：如何在重新加载后使用保存在 localStorage 中的 blob URL

Question

我正在 Next.js 中构建一个没有服务器的应用程序。我使用

<input>

标签获取视频文件输入，然后将其转换为 blob url 并将其保存在

localStorage

中以供跨会话使用。

但是，重新加载页面后，blob URL 变得无效（至少我是这么认为的），如何在重新加载后使用 blob 或者是否有其他方法？

我的代码：

// 将文件 obj 转换为 blob url 并保存到 localStorage

localStorage.setItem('temp', URL.createObjectURL(data.file[0]))

// 获取视频 blob url 并将其设置为 videoRef src

const vidUrl = localStorage.getItem('temp')
videoRef.current.src = vidUrl;

Answer 1

听起来您正在使用浏览器在将某些内容上传到浏览器时创建的内置 blob url。这个 url 只是暂时的，当浏览器将文件保留在内存中时，一旦刷新页面，它就会清除它，导致 url 失效。

如果您想稍后访问该文件，则需要将其存储在永久存储中。如果允许的话，您可以尝试将其存储在本地网络服务器上，或者使用存储提供商，例如 Blobstorage、S3 Buckets 等。