Question

如何通过浏览器机制在用户的计算机上缓存/管理许多大文件（视频）（插件是可接受的解决方案）。据我所知，本地存储是关于数据库类型数据，而不是文件。

Answer 1

FileSystem API [1,2]将是你最好的选择，在某一点上它是非常出色的。然而它被w3c抛弃了。从他们自己的文档：

本文档的工作已经停止，不应引用或用作实施的基础。

Answer 2

其他人已经说过，HTML5 FileSystem API已经死了。 IndexedDB似乎是另一种选择。请参阅here。

Answer 3

这个问题的答案取决于你对以下问题的回答：

您是否认为目前仅在基于Chromium的浏览器（Chrome＆amp; Opera）中支持编写文件？
您是否可以利用现在的专有API来利用这种能力？
你是否可以在将来删除所述API？
您是否可以将使用所述API创建的文件缩小到磁盘上的沙箱（文件无法生效的位置）？
你是否可以使用虚拟文件系统（一种目录结构，它不一定存在于磁盘上，其形式与从浏览器中访问时相同），以表示此类文件？

如果您回答＆＃34;是＆＃34;对于上述所有内容，然后使用File，FileWriter和FileSystem API，您可以使用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和FileSystem API

写文件：

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中启用的文件i / o，通过Silverlight提供访问权限。

IsolatedStorage在许多方面与FileSystem类似，特别是它也存在于沙箱中并使用虚拟文件系统。但是，managed code需要使用此功能;需要编写此类代码的解决方案超出了本问题的范围。

当然，一个使用补充托管代码的解决方案，只留下一个只写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由这个人维持在这里：）

Answer 4

在大多数实现中，默认情况下HTML5本地存储限制为5MB。我不认为你可以存储很多视频。

来源：https://web.archive.org/web/20120714114208/http://diveintohtml5.info/storage.html

Answer 5

以上解释了html5本地存储的大多数部分。

这里https://stackoverflow.com/a/11272187/1460465有一个类似的问题，不是关于视频，而是你可以将xml添加到本地存储。

我在文章的答案中提到了一篇文章，javascript用于将xml解析为本地存储以及如何离线查询。

可能会帮助你。

Answer 6

FSO.js将为您包装HTML5 FileSystem API，使得在沙盒文件系统中存储，管理和操作大型文件集非常容易。

你可以使用HTML5本地存储来存储文件吗？如果没有，怎么样？

6 个答案: