Time for action – saving all essential game data in the local storage

We will continue work with our CSS3 card matching game:

1. Open the matchgame.js JavaScript file.

2. Add the following code at the top of the JavaScript file after declaring the matchingGame variable. This code creates an object named savingObject to save the array of the deck, the removed cards and the current elapsed time:

   matchingGame.savingObject = {};
   
   matchingGame.savingObject.deck = [];
   
   // array to store which card is removed by their index.
   matchingGame.savingObject.removedCards = [];
   
   // store the counting elapsed time.
   matchingGame.savingObject.currentElapsedTime = 0;

3. In the jQuery ready function, add the following highlighted code. It clones the order of the deck to the savingObject. In addition, it assigns an index to each card in the DOM data attribute:

   $(document).ready(function(){
      // existing code goes here.
   
      // shuffling the deck
      matchingGame.deck.sort(shuffle);
   
      // copying the deck into saving object...