大概玩游戏的时候最讨厌的就是游戏没打完退出之后的状态了，但是在html5游戏上则不会出现这种情况。像site pinning特性, 试图给web浏览器web应用程序和常规的桌面应用同样的地位。 然而, 作为应用程序运行的网站想法太新了, 网页要维持客户端状态。 关闭Microsoft Word前,你可能会三思后行, 但是可能不会对于一个开放的网页谨慎行事。大部分时间, 它不是问题 --- 大多数网页要嘛是无状态的, 要嘛是在服务器上维护记录你的信息。 

  然而, 浏览器游戏, 是非常不同的小怪兽。 既然JavaScript代码运行在客户端, HTML5游戏状态通常都保持在瞬时内存中(又称RAM)。关闭游戏器窗口,你辛苦赚取的积分就付之东流了。 

  现在, 你可能会认为, 一个明智的用户会足够谨慎, 他们连续玩了8小时, 不关闭游戏。 但事故常有发生, 特别是当打开了多个选项卡或突然断电。

  一言蔽之: 当编写HTML5游戏的时候, 绝对的最佳实践是定期保持玩家进度,  允许玩家恢复上一次关闭网页时的状态。

  现在,你应在哪保存玩家的进度呢?过去,显而易见的地方是服务器端或浏览器cookie。 两个解决方案都不是特别有吸引力。 服务器端方案, HTTP请求不得不每次构造需要存储或取回的信息。 使用cookie的方案, 你的空间就非常有限了, cookie的可用空间大大依赖于浏览器配置。

  更好的可行方案是使用HTML5 DOM storage。 DOM storage 通过一个接口, 让你为每个网站保存几兆的数据, 它类似于一个key-value存储(或者一个JavaScript expando对象)。 这非常方便,但在HTML5游戏上下文中, 你也可能需要记住复杂的数据结构 --- 一些DOM storage非原生支持的结构。 

  幸运的是,现代的JavaScript引擎都有内建的机制, 將对象序列化成紧凑的结构,如JSON。 使用这种方案, DOM storage也可以记住复杂信息。接下来的两个助手函数, 使用HTML5 DOM storage和ECMAScript5的内建JSON特性, 解决了游戏状态的存储和取回。

function saveState(state) {
    window.localStorage.setItem("gameState", JSON.stringify(state));
}
 
function restoreState() {
    var state = window.localStorage.getItem("gameState");
    if (state) {
        return JSON.parse(state);
    } else {
        return null;
    }
}


  想要了解 HTML5游戏开发更多请关注H5edu官网、微信等平台。