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

Posted 2023-02-16

【中文标题】您可以使用 HTML5 本地存储来存储文件吗？如果没有，怎么办？

【英文标题】：Can you use HTML5 local storage to store a file? If not, how?

【发布时间】：2011-06-23 20:36:36

【问题描述】：

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

【问题讨论】：

我不希望我的计算机空间被缓存的视频占用...

可能是Base64 encoding，但这更适合图像而不是视频。

@JCOC611：大体上，我的意思是 10 - 30 兆。很多，我的意思是 10。有一个关于用尽某人的带宽的争论（尤其是在加拿大！），但我不认为 100 - 300 兆的已用空间会杀死你。大概这将是一个可选功能（这就是插件解决方案可以接受的原因）。

W3C 指定 Web 存储的意图是大型本地缓存：“特别是，Web 应用程序可能希望存储兆字节的用户数据，例如整个用户创作的文档或用户的邮箱，出于性能原因在客户端。” -- dev.w3.org/html5/webstorage 但我会给用户一个选项，让您的应用程序（授予它权限）这样做 - 虽然只是个人偏好，尽管其他人似乎共享.

是的，如果它是可选的，实际上它似乎是一个不错的功能。

【参考方案1】：

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

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

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

【讨论】：

哇，即使按照标准，浏览器也正在变成一个操作系统！

【参考方案2】：

HTML5 本地存储目前在大多数实现中默认限制为 5MB。我认为您不能在其中存储大量视频。

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

【讨论】：

谢谢。 “要记住的一件事是，您存储的是字符串，而不是原始格式的数据。”

您认为通过对视频进行 Base64 编码、对其进行压缩，然后将压缩文件的 Base64 编码放入 Web 存储中，是否会带来任何尺寸减小的好处？我已经看到压缩文本缩小到原始大小的一小部分。解码和解压缩也很耗电。

@John 我认为您不能通过将压缩二进制数据转换为文本来进一步压缩压缩二进制数据。

Base64 编码二进制数据的全部意义在于允许您将其存储为字符串，如果您压缩该字符串，它会返回二进制数据，因此您基本上是在自取其辱。跨度>

@Klinky 您可以使用文本压缩算法来压缩文本，该算法基本上会随机播放字母。 IE。它保持 Base64 编码，只是“优化”。不过，我认为您不会在已经压缩的随机数据方面取得很大成功。

【参考方案3】：

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

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

我在文章的回答中提到了一篇文章 javascript is used to parse a xml to local storage 以及如何离线查询它。

可能会对你有所帮助。

【参考方案4】：

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

【参考方案5】：

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

【参考方案6】：

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

您是否同意目前仅在基于 Chromium 的浏览器（Chrome 和 Opera）中支持写入文件？ 您是否可以使用目前专有的 API 来利用这种功能？ 您是否同意将来删除上述 API？ 您是否可以将使用上述 API 创建的文件限制在磁盘上的

沙盒

（文件在该位置之外不会产生任何影响）？ 您可以使用

虚拟文件系统

（磁盘上的目录结构不一定以与从浏览器中访问时相同的形式存在）来表示此类文件?

如果您对上述所有问题的回答为“是”，那么使用 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)
);

使用原始 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 在 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 由这里的这个人维护 :)