HTML5 Games: Creating Fun with HTML5, CSS3 and WebGL, 2nd Edition

Chapter 12

Local Storage and Caching

In This Chapter

• Introducing Web Storage

• Storing data in cookies versus in local storage

• Adding persistent data to the game

• Making a high score list

• Enabling offline play with application caching

HTTP COOKIES HAVE traditionally solved the problem of storing data in the browser. In this chapter, you learn how to use Web Storage, another technology born out of the HTML5 movement, to achieve some of the same functionality. You also find out how to use Web Storage to make the game remember where the player left off and how to add a high score list.

The final section discusses the application cache introduced by HTML5 and how you can use it to make your games accessible, even without a network connection.

Storing Data with Web Storage

Web Storage is often lumped in with other technologies under the HTML5 umbrella, although it has now been moved to its own specification (www.w3.org/TR/webstorage) and is being developed independently from HTML5.

Unlike cookies, data stored in Web Storage remains on the client and is never transferred to the server. Cookies, in contrast, are sent back and forth between the browser and the server with each HTTP request. This limits the amount of data you can store as cookies, and if the server has no use for the data, the bandwidth used to transmit the cookies is wasted. Browsers impose hard limits on the number and size of cookies. To stay on the safe side, store no more than 50 cookies and 4K per domain. ...