文件 API，本地文件的持久链接

Question

我目前正在编写一些基于游戏的网络脚本（将游戏移植到网络）。 脚本从我的网络主机下载数据，因此加载速度很慢（必须下载每个文件：地图、模型、纹理......）。 为了纠正这个问题，我添加了一个选项，允许用户在他们的计算机中选择他们的本地游戏数据（使用文件 API - 拖放）以直接从本地解析内容并避免从网络下载多个大型游戏，结果非常快.

问题出在这里：每次他们重新加载浏览器时，他们都必须一次又一次地重新选择他们的文件。它对用户不友好。

那么，有没有办法从这个游戏存档中保留参考，以避免用户每次都重新进行拖放操作？我知道安全问题，只是想知道是否存在持久 URL.createObjectURL() 之类的东西。

注意：游戏数据大约是~2Go，所以无法将其存储在FileSystem API中（我也不想复制它，当您复制数据时会浪费空间）可以保留对它的引用）。

谢谢你:)

Answer 1

你必须得到用户的输入

未经用户确认，无法访问客户端计算机上的文件。一旦用户选择了一个文件（您可以使用change 事件来收听它），您就可以使用FileReader API 来读取文件。

document.getElementById("input").addEventListener("change", function() {
    const fs = new FileReader();
    fs.readAsText(this.files[0]);
    fs.onloadend = function() {
        document.getElementById("output").innerText = fs.result;
    }
});

<input id="input" type="file" />
<div id="output"></div>

使用localStorage 存储您的一小部分文件

您可以使用localStorage API 来存储您的一些文件，但capacity is very limited 尤其适用于像您这样的项目（在当前最流行的浏览器上最大为 5 到 10 MB）。

这将使您的编码更加困难，因为您必须每次都检查是否存储了哪些内容，并加载未保存的内容。

缓存

使用caching，你基本上会遇到和localStorage一样的问题：每个浏览器都有自己的最大容量。

此方法的优点是您不必担心已加载或未加载的内容，因为浏览器会自行执行此操作。

使用闪光灯

现在，如果您真的完全不关心安全性，您可以使用 Flash 插件来存储和加载文件，然后使用 ExternalInterface 在 JavaScript 代码中加载数据。

ExternalInterface.call("loaded", filename, data);

// And then in JavaScript:
// function loaded(filename, data)
// ...

您可以使用SharedObject 来保存和加载您的数据。

我不是 AS3 专家，请见谅。

桌面应用程序？

最后一个选项是将您的游戏转换并捆绑到桌面应用程序中，例如通过electron 将其捆绑，然后使用例如NeDB，它目前是electron 的suggested 工具，用于持久存储。

Answer 2

您可能需要考虑使用IndexedDB。最近的浏览器支持它，包括 Chrome、Firefox 和 Safari（macOS 和 iOS）。 IndexedDB 允许您将 Blob、File 或 ArrayBuffer 保存为 IndexedDB 对象存储中的值。

检查此IndexedDB: Store file as File or Blob or ArrayBuffer. What is the best option?。