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

Question

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

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

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

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

Answer 1

[IndexedDB] 似乎更适合持久存储大量小记录，而不是像我试图做的那样存储单个大文件。

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

如果您要存储的数据符合存储限制，那么您可以使用单个文件将其全部填充。

Answer 2

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

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

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

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

缓存和 Service Workers 的使用是一个高级主题

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

Answer 3

也许从 2024 年开始，OPFS（Origin-Provate 文件系统） 就是您想要的。尽管如此，在 2024 年 3 月最新浏览器中的实现仍然相当有限。对于许多设备，浏览器施加的存储限制很容易允许 50MB。