Question

我有一个html5游戏，有很多，数百mbs的图像资源，我想使用HTML5存储api之一进行缓存。通常它们只是img元素，src链接到cdn。

我想在本地缓存这些元素，以便用户可以在后续访问中更快地访问它们。

最好的方法是什么？

Filesystem API: Little support and still requires rewriting urls.
Indexdb: Little support and still  requires rewriting urls
appcache: too small
chrome app: ??

例如，runescape在做什么？

https://www.runescape.com/game?html5=1

Answer 1

我认为最好的方法是创建Chrome应用并将其存储在您的服务器上进行下载。您的应用可以在安装到用户时使用unlimited storage。更多信息：

Chrome扩展程序您可以创建两种类型的应用程序 - a   Packaged App和Hosted App。

打包的应用程序是您创建的应用程序，可以包含有限数量的应用程序   （10MB）数据。然后，此应用可以由Google发布（并由其托管）   在他们的Chrome App Store上。

托管应用程序是您在自己的服务器上托管的应用程序（也就是那个   我将在这里讨论）。在这种情况下，技术上没有   限制使用“传统”可以包含的数据量   HTML5离线缓存技术。然而在实践中有   实际上，对于每个资源限制为的应用，限制为260MB   大约32MB（参见Chromium讨论组的这个主题   细节）。根据我与之讨论的讨论   开发商，他同意这些限制是非常低的，并且会   在未来的版本中增加。

...

请注意，在manifest.json中，存储问题的关键部分是   权限数组，具体为：
"permissions": [
  "unlimitedStorage"
]
此部分告诉Chrome不要限制存储空间适用于您的应用程序。

这是this文章的主要目标。

Answer 2

如您所述，文件系统API和IndexDB不受广泛支持。也就是说，我认为解决方案主要取决于您的目标受众。

浏览器支持

更多浏览器支持

IndexedDB而不是File-System API。正如this article on Firefox's opinion of the File-System API指出的那样，您可以执行在IndexDB中存储文件的相同操作，您可以在File-System API上执行这些操作。甚至有javascript libraries通过IndexedDB实现文件系统API。

文件大小/磁盘空间

使用这两种技术，您必须在超出限制时管理请求配额。

来自IndexedDB存储限制的引用通过developer.mozilla

单个数据库项目的大小没有任何限制。但是，每个IndexedDB数据库的大小可能有限制。这个限制（以及用户界面断言它的方式）可能因浏览器而异。

我不知道所有浏览器上IndexedDB的最大存储量是多少，这听起来像Firefox本身发布request confirmation to the user for permission to store more than 50MB - 所以你可以使用浏览器可用的内容。 IE10大约有250MB的限制see here for more on IE10。我在Chrome浏览器上阅读了5MB配额上的一些帖子，但我认为它符合Temporary Storage的规则。

使用文件系统API，如果您使用永久存储，则文件系统具有无限的可用空间（但此处您必须从一开始就发出配额请求，因此它与Firefox执行配额请求的方式类似）。临时存储具有实际限制，具体取决于可用的硬盘空间以及有关文件系统配额限制的其他一些事项(Read this for more info

我无法从非常大的files.images上的IndexedDB经验谈到，但对于文件系统API，它对于具有GB值的文件的读写操作具有出色的工作性能。您可以拥有单个BLOB的数百MB大小并对各个段进行分区。也就是说，它听起来不像你的游戏，因为你的文件大小（单个文件大小）可能不会超过两位数MB。

Conclussion

IndexedDB可能是您的最佳选择，考虑到您正在制作网络游戏并吸引更多人，您需要使用大多数人都可以使用的API。

以下代码段来自downloading, writing and reading image files from IndexedDB专门的文章。阅读完文章之后，与文件系统API相比，URL重写的想法似乎并不那么令人生畏。

// Retrieve the file that was just stored
transaction.objectStore("elephants").get("image").onsuccess = function (event) {
    var imgFile = event.target.result;
    console.log("Got elephant!" + imgFile);

    // Get window.URL object
    var URL = window.URL || window.webkitURL;

    // Create and revoke ObjectURL
    var imgURL = URL.createObjectURL(imgFile);

    // Set img src to ObjectURL
    var imgElephant = document.getElementById("elephant");
    imgElephant.setAttribute("src", imgURL);

    // Revoking ObjectURL
    URL.revokeObjectURL(imgURL);
};

缓存html5游戏图像，无需重写网址

2 个答案:

浏览器支持

文件大小/磁盘空间

Conclussion