Как сохранить результат window.URL.createObjectURL() для будущего использования?

Question

Я делаю приложение в HTML5, где вы выбираете видео файл, а затем приложение воспроизводит его с HTML5 video тег и window.URL.createObjectURL(), Проблема заключается в том, что я хочу сохранить данные об этом видео в localStorage и воспроизвести его снова, когда пользователь использует мое приложение, но, как утверждает Mozilla MDN о результатах этого метода:

Браузеры выпустят их автоматически, когда документ выгружен

Так возможно ли сделать то, что я пытаюсь сделать? Или сделать то же самое без window.URL.createObjectURL() а с чем-то еще?

Answer 1

Я не использовал createObjectURL(), но если я правильно понимаю, это по сути временная ссылка на файл или объект в памяти. Если вы хотите сохранить реальное видео, оно будет бесполезным, поскольку этот указатель больше не будет ссылаться на само видео при следующем посещении приложения пользователем.

Я думаю, что вы могли бы сделать это с data: URL вместо этого, поскольку этот URL фактически включает в себя полные данные из файла. Этот пример демонстрирует использование 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);

Обновление: если вы хотите увеличить размер до 1 ГБ, как вы отметили в своем комментарии, вам, вероятно, лучше будет работать с FileSystem API. Для этого потребуется получить локальный файл, сохранить копию файла в постоянном хранилище файловой системы, а затем использовать createObjectURL() получить URL для копии файла. У вас все еще есть проблема с дисковым пространством - вы только что добавили 1 ГБ дублирующего содержимого файла в файловую систему пользователя - но я не думаю, что в противном случае невозможно сохранить постоянную ссылку на файл вне изолированной программной среды браузера.