如何在浏览器中使用 Javascript 持久存储大文件客户端？答案

【问题标题】：How to persistently store a large file client-side with Javascript in a browser?如何在浏览器中使用 Javascript 持久存储大文件客户端？
【发布时间】：2020-07-17 21:04:49
【问题描述】：

如何在浏览器中使用 Javascript 存储单个大文件（约 50MB），以便跨多个请求在用户会话中持续存在？

我有一个 Web 应用程序，它下载基于 JSON 的索引文件以帮助执行某些计算。但是，它不会经常更新，因此为了防止用户每次加载应用程序时都必须下载这么大的文件，我想将其存储在本地。

我看到了一些类似的问题，并看到 IndexedDB 被推荐用于“大数据”应用程序，但这似乎更适合于持久存储大量小记录，而不是像我尝试的那样存储单个大文件做。

我希望使用 LocalFileSystem API，这看起来正是我想要的，但与 Mozilla 文档相反，它似乎只在 Chrome 中受支持，即使那样，所有调用都警告你它是“已弃用”。

【问题讨论】：

基本缓存头
@epascarello 显然有些浏览器将可缓存文件的大小限制在 ~50MB：support.mozilla.org/en-US/questions/1262578
@Christian 是的，但是对于这么大的文件会遇到很多问题。通常当我得到这么多数据时，我一定会问，我真的需要一次所有的数据吗？
这能回答你的问题吗？ How to import json file into indexeddb?
这个 50MB JSON blob 中到底有什么？我感觉运行 JSON.parse( fiftyMegabytesOfJson ) 会导致浏览器冻结几秒钟……你不能把它分解成客户端实际需要的更易于管理的块吗？

标签： javascript

【解决方案1】：

[IndexedDB] 似乎更倾向于持久存储大量小记录，而不是像我正在尝试的那样存储单个大文件。

不是。您保存 10,000 个小文件或一个大文件并不会改变任何事情，因为 IndexedDB 是最适合在浏览器中存储二进制数据的 API（缓存之后）。

如果您要存储的数据适合Storage Limits，那么您可以用一个文件将其全部填充。

【讨论】：

【解决方案2】：

MDN 的Client-side storage 文章详细讨论了这些选项。基本的sessionStorage 应该适合您，或者localStorage 如果您想跨多个会话（网页访问）持久保存数据。

您将存储一个大的 string 值（您的 JSON），并且在使用该数据之前您需要在客户端解析它。考虑到客户端兼容性，5MB 似乎是限制。

键和值始终采用 UTF-16 DOMString 格式

较新的缓存 API 最好，但跨平台兼容性支持会有所不同。

缓存和服务工作者的使用是一个高级主题

假设纯文本，50MB 存储大约 290 本书（100 页书）。看来您可以减少需要存储在客户端上的 50MB 文本（JSON 字符串）。

【讨论】：