如何在html游戏中保存进度

Question

我想知道如何保存玩家在我正在制作的游戏中取得的进步。我可以通过 cookie 执行此操作吗？或者我还可以如何将其保存到玩家计算机？感谢所有的帮助！

原文由 Geroy290 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

使用 Javascript 保存本地文件有两种选择，它们是 cookies 和 localStorage 。

使用 Cookie：

document.cookie 属性用于设置、读取、更改和删除浏览器cookie。

• 要设置一个 cookie， document.cookie="cookiename=Foo Bar"; ，或者如果你想要一个到期日期，也可以这样： document.cookie="cookiename=Foo Bar; expires=Mon, 18 Jan 2016 12:00:00 UTC";
• 要读取 cookie，只需代码 document.cookie 就会在该页面上返回您网站的所有 cookie。它没有将它们放在一个数组中，而是一个格式为 cookiename=foobar; nextcookiename=foobar; 等的字符串。您可以使用 document.cookie.split("; ");
• 要更改 cookie，只需如上所述再次设置它，因为这将覆盖它
• 要删除 cookie，请将其重新设置为过去的到期日期。这将覆盖它，然后它将过期，将其删除。

使用本地存储：

新的 HTML5 localStorage 对象是另一种在本地存储数据的方式：

• 要在 localStorage 中设置项目，请使用 localStorage.setItem('itemname','contents');
• 要读取一个项目，它是 localStorage.getItem('itemname'); 。您可以使用“真实”值检查项目是否存在（即 if(localStorage.getItem('itemname')) ）
• 您可以使用 localStorage.setItem 更改 localStorage 项目，如上所述。
• 您可以使用 localStorage.removeItem('itemname') 删除 localStorage 项。

我应该使用哪个？

几乎所有您能想到的浏览器都支持 Cookie，但是它们会过期（它们会在设定的时间后被删除）并且也可以被用户禁用。就个人而言，我还发现 document.cookie 是一个笨拙的界面。

另一方面，localStorage 不能轻易被用户禁用，它为程序员提供了一个更易于访问的接口。据我所知，localStorage 没有过期时间。由于 localStorage 是 HTML5 的新功能，它可能无法在某些较旧的浏览器中使用（但它在新浏览器上有很好的覆盖范围，请参阅 http://caniuse.com/#feat=namevalue-storage ）。请注意，在 整个网站 上存储数据是有 限制的，而不仅仅是一个项目。

最后，这取决于你。选择您认为最适合您的游戏的那个 - 如果您已经在使用其他 HTML5 内容（例如 <canvas> ），那么 localStorage 没有任何危害，您将使用更可靠的存储方法。但是，如果您对 cookie 感到满意，那么它们就是被数以千计的极受欢迎的网站所使用的完全可行的选择——有些网站甚至同时使用这两种网站！ cookie 的一个优点是它们可以被您的网络服务器访问，而 localStorage 则不能。

无论哪种方式，您都需要查看 cookie 法，它会影响网络应用程序在用户计算机上的所有类型的存储。

原文由 Toastrackenigma 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

这个问题最难的部分不是找到一种方法来持久化数据，而是设计你的游戏，使你有一个“游戏状态”，可以序列化以在会话之间保存。

想象一下，您正在编写一个包含玩家和分数的游戏，并且您使用两个变量来表示它们。

 var player = { x: 4, y: 3 };
var score = 10;

使用 localStorage 保存这些变量相对容易。

 function save() {
  localStorage.setItem('player', JSON.stringify(player));
  localStorage.setItem('score', JSON.stringify(score));
}

function load() {
  player = JSON.parse(localStorage.getItem('player'));
  score = JSON.parse(localStorage.getItem('score'));
}

我们必须记住在存储之前将它们转换为 JSON，因为 localStorage 只能接受字符串值。

每次让游戏状态变得更复杂时，您都必须返回并编辑这两个函数。它还具有强制游戏状态用全局变量表示的不良影响。

另一种方法是用一个原子来表示整个状态——在本例中是一个 Javascript 对象。

 var state = {
  player: { x: 4, y: 3 },
  score: 10
};

现在您可以编写更直观的保存和加载函数。

 var SAVE_KEY = 'save';

function save(state) {
  localStorage.setItem(SAVE_KEY, JSON.stringify(state));
}

function load() {
  return JSON.parse(localStorage.getItem(SAVE_KEY));
}

此模式允许您将状态保存为局部变量并使用这些函数来处理它。

 var state = load();
state.score += 10;
save(state);

实际上，在存储机制之间切换非常容易，但 localStorage 可能是最容易上手的。

对于小型游戏，您可能永远不会达到 5MB 的大小限制，如果您达到了，那么您还会发现同步 JSON.stringify 和 localStorage.setItem 操作导致您的游戏冻结每次保存时都会停留几秒钟。

如果这成为一个问题，那么您可能应该寻找一种更有效的方式来构建您的状态，并且可以考虑设计一种增量保存技术，针对 IndexedDB 而不是 localStorage。

原文由 Dan Prince 发布，翻译遵循 CC BY-SA 3.0 许可协议