Local storage is a new specification from HTML5. It allows a website to store information in the browser locally and access the stored data later. This is a useful feature in game development because we can use it as a memory slot to save any game data locally in a web browser.

We are going to add the feature of storing game data in the CSS3 card matching game we built in Chapter 3, Building a Card-matching Game in CSS3. Besides storing and loading the game data, we will also notify the player when they break a record with a nice 3D ribbon using pure CSS3 styling.

In this chapter, we will cover the following topics:

You may try the final game at: http://makzan.net/html5-games/card-matching/.

The following screenshot shows the final result we will create in this chapter:

So...