每次用户加载页面时，如何存储整个Javascript文件并加载更改的版本？

Question

I am making a text based game, like Zork or A Hitchhiker's Guide to the Galaxy , that is web based, for a school project over a school year. Right now I have constructed a parser, and my game's basic structure is complete. My issue is that I need to save data after the player reloads the page.

I have a javascript file called "content.js" which stores all of the data for the game, like the player's location, what is in the areas, etc.
"content.js" contains object declarations, and functions that correspond to those objects, like "onPickup()".

I want to save this file by executing some function, and each time the user loads the page, it will load this saved version of "content.js", not the original version. For example, if the user changed something in an area, I would need to save their progress, and on reloading the page, that change would carry over.

Normally I would just store all of these objects in an array, and try to save that array, but because I created the game structure before the actual game (the story, areas, etc.), I don't know how many things I will have to save, and it would be prone to error if I forgot about one of the objects when creating such an array.

Is there any way for me to save the current version of "content.js" and have the user load that version after it is saved?
(Note: I am not using JQuery for this project)

Answer 1

You should have a look at HTML5 storage: https://www.html5rocks.com/en/features/storage

You can do something like this:

var gamedata = localStorage.getItem("gamedata");
// modify your game state
// ...
localStorage.setItem("gamedata", gamedata);

There is a simple demo at http://html5demos.com/storage . You can enter values, then close the window and open in a new window in the same browser and your previous values will be displayed.

Answer 2

You should definitly separate concerns of your application. Javascript is not intended to be the place to store things. If you are not planning to add database support server side with an API to store your users progress the hint Paul gave ist the best choice. The LocalStorage is the browsers own database, but be careful since that maybe not permanent - same applies for cookies as the user may delete that data on a regular basis. Storing the progress client side may also allow cheating since the data is stored locally and may be edited. Same applies for storage in cookies.

If you have the time consider using serverside storage. If you are not familar with php or any other serverside language have a look at meteor which uses javascript serverside (node.js) and comes with mongo db. That would definitly result in an A+ and impress your teachers :)