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

Question

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

Answer 1

FileSystem API[1,2] 将是您未来最好的选择，在某一时刻它是非常前沿的。然而它已经被w3c放弃了。来自他们自己的文档：

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

1. http://dev.w3.org/2009/dap/file -system/pub/FileSystem/
2. http://www.html5rocks.com/教程/文件/文件系统/

Answer 2

正如其他人所说，HTML5 文件系统 API 已死。 IndexedDB 似乎是另一个选择。请参阅此处。

Answer 3

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

• 您是否同意目前仅在基于 Chromium 的浏览器（Chrome 和 Opera）中支持写入文件这一事实？
• 您是否愿意使用目前专有的 API 来利用这种功能？
• 您是否同意将来删除上述 API 的可能性？
• 您是否同意将使用上述 API 创建的文件限制在磁盘上的沙箱（文件在该位置之外不会产生任何影响的位置）？
• 您是否同意使用虚拟文件系统（一种目录结构，不一定以与从浏览器内访问时相同的形式存在于磁盘上）来表示此类文件？

如果您对上述所有问题的回答都是“是”，则使用 文件，FileWriter 和 文件系统 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);

---

因为您也对非本机开放（基于插件的）解决方案，您可以在 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 正是由这里的这个人维护的:)< /em>

Answer 4

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

Answer 5

目前，在大多数实现中，HTML5 本地存储默认限制为 5MB。我认为你不能在那里存储很多视频。

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

Answer 6

上面已经解释了 html5 本地存储的大部分内容。

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

我在文章 javascript is used to parse an x​​ml to local storage and how to query it offline 中提到了我的回答中的一篇文章。

可能对你有帮助。