可以使用 HTML5 本地存储来存储文件吗?如果不是,怎么办?

IT技术 javascript html flash local-storage
2021-03-09 02:02:28

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

6个回答

FileSystem API[1,2] 将是你未来最好的选择,在某一点上它非常前沿。然而,它已被 w3c 放弃。从他们自己的文档:

本文件的工作已停止,不应作为参考或用作实施的基础。

  1. http://dev.w3.org/2009/dap/file-system/pub/FileSystem/
  2. http://www.html5rocks.com/tutorials/file/filesystem/
哇,即使按照标准,浏览器也正在变成操作系统!
2021-05-14 02:02:28

正如其他人所说,HTML5 FileSystem API 已经死了。IndexedDB 似乎是另一种选择。这里

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

  • 您是否同意目前仅在基于 Chromium 的浏览器(Chrome 和 Opera)中支持写入文件的事实?
  • 您是否可以使用截至目前的专有 API 来利用这种能力?
  • 您对将来删除所述 API 的可能性感到满意吗?
  • 您是否可以将使用所述 API 创建的文件压缩到磁盘上沙箱(文件无法产生任何影响的位置)?
  • 您是否可以使用虚拟文件系统(一种目录结构,它不一定以与从浏览器中访问时的形式相同的形式存在于磁盘上)来表示此类文件?

如果您对以上所有回答“是”,那么通过FileFileWriterFileSystem API,您可以使用 Javascript 从浏览器选项卡/窗口的上下文中读取和写入文件。

以下是如何直接和间接使用 API 来执行这些操作的简单示例:

烘焙食品*

写文件:

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

使用原始 File、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 在IndependentStorage 中启用的文件 i/o,通过 Silverlight 提供对它的访问。

隔离存储在很多方面都与文件系统相似,特别是它也存在于沙箱中并使用虚拟文件系统。但是,使用此功能需要托管代码需要编写此类代码的解决方案超出了本问题的范围。

当然,一个使用互补托管代码的解决方案,只留下一个 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 是由这里的这个人维护的 :)

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

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

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

可能会帮助你。

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