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

Question

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

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

那么，有没有办法保留这个游戏存档的引用，以避免用户每次都重新进行拖放操作？我知道安全问题，只想知道是否存在持久性URL.createObjectURL（）。

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

谢谢：）

Answer 1

您必须有来自用户的输入

在用户未确认的情况下，无法访问客户端计算机上的文件。用户选择文件后（您可以使用change事件收听），然后您可以使用FileReader API来读取文件。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

使用localStorage存储一小部分文件

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

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

缓存

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

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

使用Flash

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

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

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

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

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

桌面应用程序？

最后一个选项是将您的游戏转换并捆绑到桌面应用程序中，例如将其捆绑到electron，然后使用NeDB，这是目前的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?。