可以使用HTML5本地存储来存储文件吗?如果没有,如何解决?

w9apscun  于 2023-06-20  发布在  HTML5
关注(0)|答案(6)|浏览(228)

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

tjvv9vkg

tjvv9vkg1#

文件系统API[1,2]将是您未来最好的选择,在某个时候它非常前沿。但是它已经被w3c抛弃了。从他们自己的文件:
关于这份文件的工作已经停止,不应将其作为参考或作为执行的基础。

  1. http://dev.w3.org/2009/dap/file-system/pub/FileSystem/
  2. http://www.html5rocks.com/tutorials/file/filesystem/
gijlo24d

gijlo24d2#

HTML5 FileSystem API已经死了,就像其他人说的那样。IndexedDB似乎是另一个选择。看这里

izkcnapc

izkcnapc3#

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

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

如果您对以上所有问题的回答都是“是”,那么通过FileFileWriterFileSystem 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){}
});

使用原始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);

由于您还可以使用非本机(基于插件)的解决方案,因此您可以利用IsolatedStorage中Silverlight启用的文件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是由这个家伙在这里维护的:)

wbrvyc0a

wbrvyc0a4#

FSO.js将为您 Package HTML5 FileSystem API,使其非常容易在沙箱文件系统中存储,管理和操作大型文件集。

1szpjjfi

1szpjjfi5#

在大多数实现中,HTML5本地存储目前默认限制为5MB。我不认为你能在里面储存很多视频。
来源:https://web.archive.org/web/20120714114208/http://diveintohtml5.info/storage.html

wbrvyc0a

wbrvyc0a6#

HTML5本地存储的大部分内容已经在上面解释过了。
这里有一个类似的问题,不是关于视频,而是你是否可以将XML添加到本地存储。
我在我的回答中提到了一篇文章javascript被用来解析xml到本地存储以及如何离线查询它。
也许能帮到你

相关问题