Improving the Snake Game - Learn HTML5 by Creating Fun Games - page 220

Chapter 5. Improving the Snake Game
This chapter is the second and final part of the series where we're building a more
robust snake game. In this chapter, we'll take what we already had from Chapter 3 ,
Understanding the Gravity of HTML5 , and add more HTML5 APIs to it, so as to make
the game more feature rich, providing an even more engaging user experience.
The first version of the game used five HTML5 concepts, namely 2D canvas ren-
dering, offline application cache, web workers, typed arrays, and requestAnima-
tionFrame. In this version, we'll include two features from the new web storage API,
namely local storage and session storage. We'll also look at a third API that is part
of web storage, IndexedDB, as well as the web messaging feature, which includes
cross-domain messaging.
Local storage and session storage are two mechanisms that allow us to save data on
the user's browser using a key-value strategy. This is similar to a cookie, where every
value must be a string. The difference between these two storage options and a cook-
ie, first and foremost, is that a cookie is always sent back to the server through HTTP
requests. This can be especially undesirable when we have larger amounts of data
that we would like to store, since that data would be traveling around consuming extra
bandwidth, and there is nothing that we can do about it. With HTML5's web storage,
we can save more data locally, and that data never leaves the user's machine, though
HTTP components like cookies do.
IndexedDB, also part of web storage, is similar to local and session storage, where
data is stored in a key-value manner, but instead of values being limited to strings
only, IndexedDB is more of an object store, where we can store entire JavaScript ob-
jects. Of course, IndexedDB is much more than a mere hash map that holds objects
for us. As the name implies, this new API allows us to index these stored objects with
the purpose of being able to search for them through a query system. In summary,
IndexedDB is a NoSQL database accessed through an asynchronous programming
interface.
Finally, the web messaging API provides an interface through which an HTML docu-
ment can communicate with other HTML contexts. These documents can be related
by iframes, in separate windows, and even in different domains.