Можете ли вы использовать локальное хранилище HTML5 для хранения файла? Если нет, то как? - PullRequest
22 голосов
/ 09 февраля 2011

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

Ответы [ 6 ]

10 голосов
/ 09 февраля 2011

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

Работа над этим документом прекращена, и на него не следует ссылаться или использовать в качестве основы для реализации.http://dev.w3.org/2009/dap/file-system/pub/FileSystem/

8 голосов
/ 30 сентября 2014

API файловой системы HTML5 мертв, как говорили другие.IndexedDB, кажется, другой вариант.Смотрите здесь .

4 голосов
/ 07 июля 2016

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

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

Если вы ответили «да» на все вышеперечисленное, то с помощью API File , FileWriter и FileSystem вы можете читать и записыватьФайлы из контекста вкладки / окна браузера с использованием Javascript.

Вот простые примеры того, как API, прямо или косвенно, используются для выполнения этих действий:

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){}
});

Использование необработанного файла,FileWriter и API-интерфейсы FileSystem

Запись файла:

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 во многих отношениях похож на FileSystem, в частности он также существует в песочнице и использует виртуальную файловую систему.Однако для использования этой функции требуется управляемый код ;решение, которое требует написания такого кода, выходит за рамки этого вопроса.

Конечно, решение, которое использует дополнительный управляемый код, оставляя только один для написания 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 поддерживается только этим парнем:)

1 голос
/ 08 марта 2014

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

1 голос
/ 30 июня 2012

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

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

Я упомянул статью в своем ответе в статье. Javascript используется для синтаксического анализа XML-файла в локальном хранилище и для запроса его в автономном режиме.

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

1 голос
/ 09 февраля 2011

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

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...