In this tutorial we will go over how to use the SaveManager plugin for Kiwi.js. It will cover downloading and installing the plugin into your game and some of the basic functions it provides. Shown below is a simple game using the SaveManager plugin. Click anywhere to create a snowman. The game automatically saves the location of the snowman so when you close and reopen this page the snowmen will spawn in the same locations again. You can also use the ‘C’ key to clear the snowmen save data.

Download the source code for this tutorial

Downloading and Adding the Plugin

Download the SaveManager plugin from here. Once you have downloaded the plugin, unzip the contents of the folder to the location of your game. We recommend containing all your plugins within a plugin folder. Inside the folder you will find two js files, a readme.txt and an example folder. Read through the readme.txt file to get an overview of the plugin. We will be using the saveManager-1.0.0.js file for our game as it contains the plugin. There is also a minified version of the plugin if you prefer.

To add the plugin to our game we need to add it as a script to our html file.

We also need to add the plugin to our game’s options variable. Here we specify that we are using one plugin which is called ‘SaveGame’, which corresponds to the unique name located inside the plugin. This will boot the plugin and add it to our game so we can access it easily.

Now that we have added our SaveManager let’s look at how to save data locally.

Saving data

Saving data locally will save information to your browser, or Cocoon.js app which can be loaded again. This data is stored until the browser’s cache and cookies are cleared or you manually clear the data.

Firstly we are going to need a location to save to. Our localStorage object is already created when the game boots so we just need to add an array to store the data in and a key for the data. Passing through the true boolean will also save the localStorage automatically, otherwise it will need to be saved manually.

In our game above we want to save the x and y positions of our snowmen, when they are created, therefore we need a snowmenData variable array, which will store x and y coordinates.

When we create a snowman we should push the x and y numbers to this array.

Now that we have updated our snowmenData array we need to update our localStorage object using the edit function. We pass through the key of the data we wish to edit, and the new array of snowmenData. This replaces the old data in the snowmen key with the current set of snowmenData. Once again, passing through a true boolean will automatically save the data to the browser.

Now you know how to save data, however there is no use for stored data if we don’t know how to load it back in.

Loading existing data

When we create our state we should check to see if there is any data currently stored in our browser. At the end of our create method we can check this using the exists function.

This will return true if there is a set of data called  snowmen. However, if it returns false it means that we need to create the data instead in the same way as before. Simply wrap the add function in an else statement.

Inside the if statement we need to load in any existing data and work out what to do with it. First we should update our snowmenData array to match the existing data in the localStorage using the getData function.

Next we need to use this data for something. In our game, since the data corresponds to x and y coordinates of snowmen we should create new snowman objects at these locations.

Clearing data

Sometime we need to be able to clear saved data without going to the trouble of clearing the cache and cookies. Luckily there are two easy ways to do this with the saveManager plugin.

The first way is to use the remove method. This requires a key and will remove any data associated with the given key. Once again, passing a true boolean through will automatically save the data, or lack of data in this case, to the browser

The other way is using the clear method. The clear method will remove all data in the localStorage for that game, so it is a nice quick way to completely delete data. This is shown in the game above when the ‘C’ key is pressed.