文件API,到本地文件的持久链接

Question

我目前正在开发一些基于游戏的网页脚本(将游戏移植到网络上).脚本从我的Web主机下载数据,因此加载速度很慢(必须下载每个文件:地图,模型,纹理......).为了解决这个问题,我添加了一个选项,允许用户在他们的计算机中选择他们的本地游戏数据(使用File API - 拖放)直接从本地解析内容,避免从网上下载多个megas,结果非常快.

问题在于:每次重新加载浏览器时,都必须一次又一次地重新选择文件.它不是用户友好的.

那么,有没有办法从这个游戏存档中保留一个参考,以避免用户每次都重新进行拖放操作？我知道安全问题,只想知道是否有类似持久性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来存储一些文件，但容量非常有限，特别是对于像您这样的项目（当前最流行的浏览器上最大为 5 到 10 MB）。

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

缓存

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

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

使用闪光灯

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

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

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

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

我不是AS3专家，如有笨拙之处请见谅。

桌面应用程序？

最后一个选项是将游戏转换并捆绑到桌面应用程序中，例如通过electro捆绑它，然后使用NeDB等，这是Electron目前建议的持久存储工具。