Javascript Saving

About this tutorial

Category: Javascript
Difficulty: Advanced
Javascript Saving.zip

Results

Saving is an important aspect when it comes to developing an incremental game, and is something that every developer should consider. This lesson is a standalone lesson that will cover the basics of saving data to local storage using JSON and assumes you have basic knowledge of classes.

The simplest method to prepare your data for saving is to contain it within a global variable. Generally, I use a class named "Game" to contain all this information. This class will then contain arrays, classes, and general variables to hold all the necessary information. For now, though, we'll use a simple set of data. Let's use the following class to save our data. Note that we are setting it up as a function, so we need to declare the new variable from the function:

function NewGame() {
	this.name = "Our Game";
	this.description = "Our Game's Description";
	this.numbers = [];
	for (var i=0;i<10;i++) {
		this.numbers[i] = i;
	}
}

The above function holds a generic set of information including strings and an array of integers. This is the data we will save, then load from storage and display to the user for our test. First, we need to declare our variable:

var Game = new NewGame();

For those that don't understand, this tells javascript that you want a variable to have the structure of the function that you are assigning to it. It's a great way to define classes that you need to use multiple times.

Now that we have our variable with the appropriate information entered, we can take it and turn it into a string. The easiest, and safest, way to do this is to use JSON. JSON is compatable with most browsers (any that support local storage, so there's no issue for us anyway) and disassembles the variable into a structure string of variable names and values. We can "stringify" our variable as below:

var SaveGame = JSON.stringify(Game);

Our new variable, SaveGame, now contains the information that we need to save. Now all we have to do is create the save in local storage. This is another simple line as below:

window.localStorage['SaveName'] = SaveGame;

Alternatively, you could combine the two lines as such:

window.localStorage['SaveName'] = JSON.stringify(Game);

Note that the 'SaveName' string is the name by which you must call this save data. You can use variables to change the name of the save, meaning you can allow your users to enter their own names, allowing for many saves on the same machine.

Now we'll call our data from the save. Use the following line to load the save into yet another variable:

window.GameTwo = JSON.parse(window.localStorage['SaveName']);

This is combining two lines again, loading the data from storage and then returning the string to a variable. We call the new variable as a window variable so that it becomes global rather than fixed to the current function.

Now you can easily return this information to the user, or use the DOM to check that the data was saved and loaded correctly.