思洋互动网站建设学前班

建议3：自动保存用户的记录

使用 site pinning,web浏览器试图让Web Apps可以像桌面apps一样工作。但是，让网站像Apps一样运行的想法还比较新鲜，同样的，让Web页面保存客户端的状态也尚未成熟。用户在关闭Microsoft Word的文档时可能会思考一下内容是否已经保存，而在关闭Web页面时往往不会这么仔细了。通常这并不会带来什么问题——大多数的Web页面是没有状态的，或者是将用户的记录保存在了服务器上。

但如果是处理浏览器游戏，情况就完全不同了。通常在客户端执行的是JavaScript代码，HTML5游戏通常将游戏的状态缓存在内存中（RAM）。一旦关闭浏览器窗口，用户辛辛苦苦赢得的高分就永远地丢失了。
广州网站建设,网站建设,广州网页设计,广州网站设计

你可以要求用户小心一点，不要将正在进行的游戏窗口关闭，但是意外总是会发生的，尤其是当用户开了多个窗口或是电池没电的时候。

长话短说：在编写HTML5游戏时，最好是经常将游戏玩家的进度状态保存一下，当用户重新打开关闭的web页面时，应该让用户可以继续之前没有结束的游戏而不是重头来过。

你应该将用户的记录保存在哪里呢？过去，答案往往是服务器端的数据库或是客户端的cookie。但是这两个都不是最佳的选择。如果是在服务器端，则会产生额外的HTTP请求开销。如果是cookie的话，则可以保存记录的空间非常有限，并且cookie的寿命取决于浏览器的配置。

一个更有效的方法是使用HTML5 DOM storage。DOM Storage提供了一个key-value存储（或是JavaScript定义的对象）的接口，可以为每个网站保存几兆的数据。使用起来非常方便，但是在HTML5游戏中，你可能想要记录一些更加复杂的数据结构——这些DOM storage本身可能并不支持。幸运的是，现在的JavaScript提供了一套机制帮助开发者将一组对象压缩成一些紧凑的符号，这就是JSON机制。使用这套机制，DOM storage可以保存任何格式的信息。下面的两个函数展示了如何使用HTML5 DOM storage保存游戏状态以及ECMAScript5中的JSON功能：
广州网站建设,网站建设,广州网页设计,广州网站设计

1. function saveState(state) {   
2. window.localStorage.setItem("gameState", JSON.stringify(state));   
3. }   
4. function restoreState() {   
5. var state = window.localStorage.getItem("gameState");   
6. if(state) {   
7. return JSON.parse(state);   
8. }else{   
9. retrun null;   
10. }   
11. }