javascript - 如何保存 window.URL.createObjectURL() 结果以供将来使用？

Question

我正在用 HTML5 创建一个应用程序，您可以在其中选择一个视频文件，然后该应用程序使用 HTML5 video 标签和 window.URL.createObjectURL()。问题是我想将有关此视频的数据保存在 localStorage 中，并在用户使用我的应用程序时再次播放，但显示为 Mozilla MDN states关于此方法的结果:

Browsers will release these automatically when the document is unloaded

那么我想做的事情有可能吗？或者在没有 window.URL.createObjectURL() 但使用其他东西的情况下做同样的事情？

Answer 1

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

我认为您可以使用 data: URL 来完成此操作，因为该 URL 实际上包含文件中的完整数据。 This example演示了如何使用 FileReader 生成数据 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 的重复文件内容 - 但我认为否则不可能在浏览器沙箱之外保持对文件的持久引用。