首页 文章

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

提问于
浏览 次
21

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

javascript html5 flash local-storage

6 回答

  • 1

    文件系统API [1,2]将是你最好的选择，有一点它是非常流行的 . 然而它被w3c抛弃了 . 从他们自己的文件：

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

    回复于
  • 1

    正如其他人所说，HTML5 FileSystem API已经死了 . IndexedDB似乎是另一种选择 . 见here .

    回复于
  • 1

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

    • 对于编写文件的支持目前仅存在于基于Chromium的浏览器（Chrome和Opera）这一事实，你还好吗？

    • 您是否可以利用现在的专有API来利用这种功能？

    • 您是否可以在将来删除所述API？

    • 您是否可以将使用所述API创建的文件限制在磁盘上的 sandbox （文件无法生效的位置）？

    • 你是否可以使用 virtual file system （一种目录结构，它不一定存在于磁盘上，与从浏览器中访问时所用的形式相同）来表示这些文件？

    如果对上述所有内容回答了"yes"，那么使用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){}
});

    Using the raw File, FileWriter, and FileSystem APIs

    写文件：

    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由这个人维持正确:)
    回复于
  • 9

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

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

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

    可能会帮助你 .

    回复于
  • 4

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

    回复于
  • 8

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

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

    回复于

相关问题