How to save progress in an html game

Question

I want to know how I can save the progress a player has made in a game that I am making. Could I do this through cookies or how else can I save to the players computer? Thanks for all of the help!

Answer 1

You have pretty much two options for saving localy using Javascript, which are cookies and localStorage.

With Cookies:

The document.cookie property is used for setting, reading, altering and deleting browser cookies.

• To set a cookie, document.cookie="cookiename=Foo Bar";, alternatively like so if you want an expiry date: document.cookie="cookiename=Foo Bar; expires=Mon, 18 Jan 2016 12:00:00 UTC";
• To read a cookie, just the code document.cookie will return all of your site's cookies on that page. It doesn't put them in an array, but instead a single string in the format of cookiename=foobar; nextcookiename=foobar;, etc. You can turn this into an array easily using document.cookie.split("; ");
• To alter a cookie, simply set it again as described above, as that will overwrite it
• To delete a cookie, set it again with an expiry date in the past. This will overwrite it, and then it will expire, deleting it.

With localStorage:

The new HTML5 localStorage Object is another way to store data locally:

• To set an item in localStorage, use localStorage.setItem('itemname','contents');
• To read an item, it's localStorage.getItem('itemname');. You can check if an item exists using "truthy" values (i.e. if(localStorage.getItem('itemname')))
• You can alter a localStorage item using localStorage.setItem as described above.
• You can delete a localStorage item using localStorage.removeItem('itemname').

Which should I use?

Cookies are supported in just about any browser that you can think of, however they expire (they get deleted after a set amount of time) and also can be disabled by users. Personally, I also find document.cookie a clunky interface.

localStorage on the other hand cannot be easily disabled by the user, and provides a more accessible interface for the programmer. As far as I'm aware, there is no expiration for localStorage. Since localStorage is new with HTML5, it may not work in some older browsers (however it's got great coverage on new browsers, see http://caniuse.com/#feat=namevalue-storage). Note that there is a limit for storing data on your entire site, not just for one item.

In the end, it's up to you. Pick the one you think is going to work best for your game - if you're already using other HTML5 content (such as <canvas>) then there's no harm in localStorage and you'll be using a more reliable storage method. However, if you're happy with cookies then they are a perfectly viable option used by thousands of extremely popular sites - some even use both! One advantage to cookies is that they can be accessed by your web server, whereas localStorage cannot be.

Either way, you'll need to check out the cookie law, which effects all types of storage on the user's computers by a web app.

Answer 2

The hardest part of this problem is not finding a way to persist the data, but instead designing your game in such a way that you have a "game state" that can be serialized for saving between sessions.

Imagine you are writing a game with a player and a score and you're using two variables to represent them.

var player = { x: 4, y: 3 };
var score = 10;

It's relatively easy to save these variables with localStorage.

function save() {
  localStorage.setItem('player', JSON.stringify(player));
  localStorage.setItem('score', JSON.stringify(score));
}

function load() {
  player = JSON.parse(localStorage.getItem('player'));
  score = JSON.parse(localStorage.getItem('score'));
}

We have to remember to convert them to JSON before storing, because localStorage can only accept string values.

Each time you make your game state more complex you have to come back and edit both of these functions. It also has the undesirable effect of forcing the game state to be represented with global variables.

The alternative is to represent the entire state with one atom — in this case a Javascript object.

var state = {
  player: { x: 4, y: 3 },
  score: 10
};

Now you can write much more intuitive save and load functions.

var SAVE_KEY = 'save';

function save(state) {
  localStorage.setItem(SAVE_KEY, JSON.stringify(state));
}

function load() {
  return JSON.parse(localStorage.getItem(SAVE_KEY));
}

This pattern allows you to keep state as a local variable and use these functions to work with it.

var state = load();
state.score += 10;
save(state);

In actuality it's quite easy to switch between storage mechanisms, but localStorage is probably the easiest to get started with.

For a small game you'll probably never reach the 5MB size limit and if you do, then you'll also find that the synchronous JSON.stringify and localStorage.setItem operations are causing your game to freeze for a few seconds whenever you save.

If this becomes a problem, then you should probably look for a more efficient way to structure your state and maybe consider designing an incremental saving technique, targeting IndexedDB rather than localStorage.