Можно ли использовать локальное хранилище HTML5 для хранения файла? Если нет, то как?

Как можно кэшировать / управлять многими большими файлами (видео) на компьютере пользователя с помощью механизмов браузера (Плагины являются приемлемыми решениями). От того, что я могу сказать, локальное хранилище данных типа базы данных, а не файлов.

21
flash html5 javascript local-storage

6 ответов

API файловой системы[1,2] будет вашим лучшим выбором в будущем, в какой-то момент это был очень кровоточащий край. Однако он был оставлен w3c. Из собственной документации:

работа над этим документом была прекращена и он не должен ссылаться или использовать в качестве основы для реализация.

  1. http://dev.w3.org/2009/dap/file-system/pub/FileSystem/
  2. http://www.html5rocks.com/tutorials/file/filesystem/
10

HTML5 FileSystem API мертв, как говорили другие. Другой вариант-IndexedDB. См.здесь.

8

ответ на этот вопрос зависит от ответов на следующие вопросы:

  • вы в порядке с тем, что поддержка записи файлов в настоящее время существует только в браузерах на основе хрома (Chrome & Opera)?
  • вы в порядке с использованием в настоящее время проприетарного API, чтобы воспользоваться такой capbility?
  • вы в порядке с возможностью удаления указанного API в будущем?
  • вы в порядке с сужением файлы, созданные с помощью указанного API для песочница (место, за пределами которого файлы не могут произвести никакого эффекта) на диске?
  • вы в порядке с использованием виртуальная файловая система (структура каталогов, которая не обязательно существует на диске в той же форме, что и при доступе из браузера) для представления таких файлов?

если вы ответили "да" на все вышеперечисленное, то с , FileWriter и файловой системы API, вы можете читать и писать файлы из контекста вкладки/окна браузера с помощью Javascript.

вот простые примеры того, как Апис используются, прямо и косвенно, в тандеме, чтобы сделать эти вещи:

BakedGoods*

пишем файл:

//"SGVsbG8gd29ybGQh" is "Hello world!" encoded in Base64; raw binary data can
//also be written with the use of Typed Arrays and the appropriate mime type
bakedGoods.set({
    data: [{key: "testFile", value: "SGVsbG8gd29ybGQh", dataFormat: "text/plain"}],
    storageTypes: ["fileSystem"],
    options: {fileSystem:{storageType: Window.PERSISTENT}},
    complete: function(byStorageTypeStoredItemRangeDataObj, byStorageTypeErrorObj){}
});

читать файл:

bakedGoods.get({
        data: ["testFile"],
        storageTypes: ["fileSystem"],
        options: {fileSystem:{storageType: Window.PERSISTENT}},
        complete: function(resultDataObj, byStorageTypeErrorObj){}
});

использование raw-файла, FileWriter и файловой системы Апис

пишем файл:

function onQuotaRequestSuccess(grantedQuota)
{

    function saveFile(directoryEntry)
    {

        function createFileWriter(fileEntry)
        {

            function write(fileWriter)
            {
                //"SGVsbG8gd29ybGQh" is "Hello world!" encoded in Base64;
                //raw binary data can also be written with the use of 
                //Typed Arrays and the appropriate mime type
                var dataBlob = new Blob(["SGVsbG8gd29ybGQh"], {type: "text/plain"});
                fileWriter.write(dataBlob);              
            }

            fileEntry.createWriter(write);
        }

        directoryEntry.getFile(
            "testFile", 
            {create: true, exclusive: true},
            createFileWriter
        );
    }

    requestFileSystem(Window.PERSISTENT, grantedQuota, saveFile);
}

var desiredQuota = 1024 * 1024 * 1024;
var quotaManagementObj = navigator.webkitPersistentStorage;
quotaManagementObj.requestQuota(desiredQuota, onQuotaRequestSuccess);

читать файл:

function onQuotaRequestSuccess(grantedQuota)
{

    function getfile(directoryEntry)
    {

        function readFile(fileEntry)
        {

            function read(file)
            {
                var fileReader = new FileReader();

                fileReader.onload = function(){var fileData = fileReader.result};
                fileReader.readAsText(file);             
            }

            fileEntry.file(read);
        }

        directoryEntry.getFile(
            "testFile", 
            {create: false},
            readFile
        );
    }

    requestFileSystem(Window.PERSISTENT, grantedQuota, getFile);
}

var desiredQuota = 1024 * 1024 * 1024;
var quotaManagementObj = navigator.webkitPersistentStorage;
quotaManagementObj.requestQuota(desiredQuota, onQuotaRequestSuccess);

поскольку вы также открыты для неродных (на основе плагинов) решений, вы можете воспользоваться файловым вводом-выводом, включенным Silverlight в IsolatedStorage, доступ к которому обеспечивается через Silverlight.

IsolatedStorage похож во многих аспектах на файловую систему, в частности, он также существует в песочнице и использует виртуальную файловую систему. Однако, управляемого кода требуется использовать это средство; решение, которое требует написания такого кода, выходит за рамки этого вопроса.

конечно, решение, которое использует дополнительный управляемый код, оставляя только Javascript для записи, хорошо в рамках этого вопроса ;):

//Write file to first of either FileSystem or IsolatedStorage
bakedGoods.set({
    data: [{key: "testFile", value: "SGVsbG8gd29ybGQh", dataFormat: "text/plain"}],
    storageTypes: ["fileSystem", "silverlight"],
    options: {fileSystem:{storageType: Window.PERSISTENT}},
    complete: function(byStorageTypeStoredItemRangeDataObj, byStorageTypeErrorObj){}
});

*BakedGoods поддерживается не кем иным, как этим парнем прямо здесь:)

5

локальное хранилище HTML5 в настоящее время ограничено 5 МБ по умолчанию в большинстве реализаций. Не думаю, что там можно хранить много видео.

источник: https://web.archive.org/web/20120714114208/http://diveintohtml5.info/storage.html

2

Ну, большинство частей локального хранилища html5 объясняется выше.

здесь https://stackoverflow.com/a/11272187/1460465 был аналогичный вопрос, не о видео, но если вы можете добавить xml в локальное хранилище.

Я упомянул статью в своем ответе в статье javascript используется для анализа xml в локальное хранилище и как запросить его в автономном режиме.

может помочь вам.

1

FSO.js обернет API файловой системы HTML5 для вас, что позволит вам легко хранить, управлять и манипулировать наборами больших файлов в изолированной файловой системе.

1