如何保存window.URL.createObjectURL()的结果以备将来使用？

Question

我正在使用HTML5制作一个应用程序，您可以选择一个视频文件，然后应用程序使用HTML5的video标签和window.URL.createObjectURL()播放它。问题是我想将这个视频的数据保存在localStorage中，并在用户再次使用我的应用程序时播放它，但正如 Mozilla MDN所述 关于此方法的结果：

浏览器将在文档卸载时自动释放这些资源

那么我正在尝试的做法可行吗？还是用其他方式而不是window.URL.createObjectURL()来实现同样的功能？

- Cokegod

Answer 1

我没有使用过createObjectURL()，但如果我理解正确的话，它本质上是一个对文件或内存对象的临时引用。如果你想保存实际的视频，这将没有用处，因为下次用户访问应用程序时，该指针将不再引用该视频。

我认为你可以使用data: URL来代替，因为该URL实际上包含了文件的全部数据。 这个例子展示了如何使用FileReader来生成data URL。我认为你应该能够做到这一点：

var reader = new FileReader();  
reader.onload = function(e) { 
    var myDataUrl = e.target.result;
    // do something with the URL in the DOM,
    // then save it to local storage
};  
reader.readAsDataURL(file);

更新：如果你想扩大到1GB，如你在评论中所提到的，你最好使用FileSystem API。这将要求你获取本地文件，将文件复制到持久文件系统存储中，并使用createObjectURL()获取文件副本的URL。你仍然会面临磁盘空间的问题 - 你刚刚向用户的文件系统添加了1GB的重复文件内容 - 但我认为否则无法保持对浏览器沙箱之外文件的持久引用。

- nrabinowitz

---

这与createObjectURL()不同，因为createObjectURL()仅链接到用户机器上的文件，而使用FileReader会将文件的所有数据放入内存中。这对图片非常有效，因为它们不占用太多空间，但是我计划让用户在我的应用程序中播放的视频甚至可以达到1GB，当已经保存在您的机器上时，您不希望所有这些数据都进入您的内存... - Cokegod

没错，但我认为createObjectURL()并没有提供对该文件的持久引用 - 这就是为什么在页面卸载时它会被撤销的原因。允许通过文件路径对文件进行持久引用将成为安全问题。这就是为什么我建议您需要保存整个文件的原因。 - nrabinowitz

您将能够向FileSystem API中写入无限的数据（并通过指定window.PERSISTENT使其持久）。 window.requestFileSystem(window.TEMPORARY, 10*1024*1024 /*10 MB*/, onInitFs, errorHandler)在此处查看html5Rocks教程 只需设置要使用的数据量即可。 - Maxime Kjaer

@nrabinowitz 我这里有一个问题：https://stackoverflow.com/questions/67015438/how-to-keep-a-bloburl-from-localstorage-useful-even-if-browser-memory-and-sessio - Zedd