使用Cookies：

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，请使用过去的过期日期再次设置。这将覆盖它，然后它将过期，删除它。

使用localStorage：

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

要在localStorage中设置项目，请使用localStorage.setItem('itemname','contents');
要阅读某个项目，请{q} localStorage.getItem('itemname');。您可以使用＆＃34; truthy＆＃34;来检查项目是否存在值（即if(localStorage.getItem('itemname'))）
您可以使用localStorage.setItem更改localStorage项目，如上所述。
您可以使用localStorage.removeItem('itemname')删除localStorage项目。

我应该使用哪种颜色？

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

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

最后，它取决于你。选择您认为最适合您游戏的游戏 - 如果您已经使用其他HTML5内容（例如<canvas>），那么localStorage就没有任何损害，您就可以了使用更可靠的存储方法。但是，如果您对cookie感到满意，那么它们是成千上万非常受欢迎的网站使用的完美可行选项 - 有些甚至同时使用它们！ Cookie的一个优点是它们可以被您的Web服务器访问，而localStorage则不能。

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

Answer 2

这个问题中最困难的部分并不是找到一种方法来保存数据，而是设计游戏的方式使你拥有一个游戏状态＆＃34;可以序列化以便在会话之间保存。

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

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。

Answer 3

这实际上取决于你在寻找什么。 Cookie是存储数据的绝佳方式，但可以由客户端进行编辑，某些浏览器可以使用Cookie。

网络存储也有它的商品和坏处。如果您的游戏必须编写大量数据并且拥有大量播放器，它将很快耗尽您的带宽，并且可能还需要时间来转移，具体取决于客户端连接。好处是它完全可以控制。数据发送后，客户端无法编辑。

Javascript有一些很棒的文件I / O工具可以帮助你。这是一个很棒的教程：https://developer.mozilla.org/en-US/Add-ons/Code_snippets/File_I_O

如果你决定使用cookies，根据你的技能，它会变得更难或更容易。同样，这是一个很棒的教程：http://www.w3schools.com/js/js_cookies.asp。

希望这有帮助!!!

编辑--- 当我提到客户时我真的想说玩家：D

如何在HTML游戏中保存进度

3 个答案:

使用Cookies：

使用localStorage：

我应该使用哪种颜色？