File API，持久链接到本地文件

Question

我正在开发一些基于游戏的网页脚本（将游戏移植到Web端）。

这些脚本需要从我的Web主机下载数据，因此加载速度很慢（必须下载每个文件: 地图、模型、纹理等）。

为了解决这个问题，我添加了一个选项，允许用户在他们的计算机中选择本地游戏数据（使用File API - 拖放），以直接解析内容并避免从Web上下载数百兆字节的数据，结果是非常快的。

这里有一个问题：每次重新加载浏览器，他们都必须重新选择文件，这不太友好。

那么，有没有一种方法可以保留对该游戏存档的引用，以避免用户每次都进行拖放？我知道有安全方面的担忧，只是想知道是否有类似于持久性URL.createObjectURL（）的东西。

注意：游戏数据约为2GB，因此无法将其存储在FileSystem API中（而且我不想复制它，如果您可以保留对它的引用，复制数据就是浪费空间）。

谢谢 ：）

- Vincent Thibault

---

我也希望能得到这个问题的答案... - mattdlockyer

我敢打赌你可以使用像Flash这样的插件。 - qxz

@qxz 谢谢，但在我的情况下，Flash 不是一个解决方案。 - A. Wolff

我认为这个问题和答案可能会回答你的问题。 - qxz

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 来存储一些文件，但是容量非常有限，特别是对于像您这样的项目（目前流行的浏览器上最多只有 5 到 10 MB）。

这会使您的编码变得更加困难，因为您必须每次检查已存储或未存储的内容，并加载未保存的内容。

缓存

通过使用 缓存，您基本上面临与 localStorage 相同的问题：每个浏览器都有自己的最大容量。

这种方法的优点在于，您不必担心已经加载或未加载的内容，因为浏览器会自动处理。

使用 Flash

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

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

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

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

我不是AS3专家，请原谅任何笨拙之处。

一个桌面应用程序？

最后一个选项是将你的游戏转换并捆绑成一个桌面应用程序，例如通过electron进行捆绑，然后使用例如NeDB，这是目前electron建议的持久性存储工具。

- nicovank

---

Flash和桌面应用程序对我来说都不是可行的解决方案。我已经使用Electron开发了混合应用程序，但我希望在仅限浏览器的应用程序中实现相同的行为。那么答案似乎很明显：“不可能……”。不过我猜你的回答可能对其他读者有用。 - A. Wolff

Answer 2

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

查看这个IndexedDB：将文件存储为File或Blob或ArrayBuffer。哪种选项最好？。

- yuxhuang

---

我已经在使用indexedDB，但我正在寻找一种不需要复制文件的解决方案。 - A. Wolff

你的文件键是什么？文件名可以从拖放API和文件API中获取。也许你可以索引文件名，并将这些文件名与HTML页面或API列表中的列表进行比较？ - yuxhuang