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

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

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

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

Ответы

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