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

Question

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

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

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

Answer 1

我没有使用createObjectURL(),但如果我理解正确,它本质上是对文件或内存中对象的临时引用.如果您想保存实际视频,它将没有用,因为下次用户访问应用程序时,该指针将不再引用该视频本身.

我认为您可以使用data:URL 来执行此操作,因为该URL实际上包含文件中的完整数据.此示例演示如何使用a 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的重复文件内容添加到用户的文件系统中 - 但我认为不可能在浏览器沙箱之外保留对文件的持久引用.