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

Question

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

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

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

Answer 1

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

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