HTML Need help with save and load

[ShonenGi]

Hello all, I have searched the web for creating Save and load like many of the HTML games I have played so far however, I'm unable to to find any information on it. Dose anyone know how to do it or have a place or a video that teaches me how to create a Save and load on the website with many save slots or downloads a save file and you can load it form a file? Thankyou for the help in advance

 

[MLocke]

The simple answer is that lots of the HTML games use Twine. They have docs on the official twinery.org site so I won't provide any specific links. It does saving and loading for you if your visual novel game fits into their development pattern.

If you were working in Javascript, which you probably wouldn't do if you were inexperienced, people used to use cookies for storage. Now, they can use HTML5 Storage API. Exporting to a file would be a different story but not that difficult.

After your first game, you could probably look at one of the many HTML5 game engines out there these days both for visual novel and other genres.

 

[ShonenGi]

The simple answer is that lots of the HTML games use Twine. They have docs on the official twinery.org site so I won't provide any specific links. It does saving and loading for you if your visual novel game fits into their development pattern.

If you were working in Javascript, which you probably wouldn't do if you were inexperienced, people used to use cookies for storage. Now, they can use HTML5 Storage API. Exporting to a file would be a different story but not that difficult.

After your first game, you could probably look at one of the many HTML5 game engines out there these days both for visual novel and other genres.

Twine eh? Thankyou for the help. I shall learn more about this Twine. I do have some experience with javascript however, so I will try to learn both.

 

[shark_inna_hat]

Saving and loading in a HTML game is tricky. You can't just dump some date to the players hard drive, because if you're running in the browser you do not have direct access to the hard drive. There are workarounds.

1. Save/Load as Download/Upload:
Here you setup a save button as an link, and generate the save file on the fly in a on click event
a.href = window.URL.createObjectURL(new Blob( ...) ...)
When the player clicks it he gets a 'download file as...' dialog popup

For loading you use a <input type="file" > and when the player clicks it, he gets a system default file browser popup, where he can select the file to load. You use window.FileReader.readAsText() to get the content of the file.

Your save data is usually encoded as json, because it comes right out of the box, but you can make it hard to read using something like base64 encoding (I think Twine does this)

2. Local Storage:
This allows you to store any key-value pair in the browser for any given host. This is somewhere between 2 and 5MB depending on the os and browser. And here's the catch - on Chrome all games/apps run from the hard drive are considered running on the same host, that means that my game, your game, and every twine game in existence share the same 2-5MB - space can run out very fast if you just dump everything into local storage. As far as I know there's no reliable way to tell how much space is left, some browsers simply lie to avoid fingerprinting - so keep in mind that if you are using local storage you might run into problems.
On the other hand - the interface is neat window.localStorage.setItem('who_rulez', 'akabur');

3. IndexedDB:
It's like localStorage only it's a real database. There are still some limits to the size of the data stored, but if your data is too big the browser will usually ask the user to allow for more space. In most cases this won't trigger until you get into a 300MB -100GB range (and if your save is a 100GB, you are doing something wrong!). The interface is not as simple as localStorage, but the real deal-beaker is that it only works if you host your game on a server.

 

[ShonenGi]

Saving and loading in a HTML game is tricky. You can't just dump some date to the players hard drive, because if you're running in the browser you do not have direct access to the hard drive. There are workarounds.

1. Save/Load as Download/Upload:
Here you setup a save button as an link, and generate the save file on the fly in a on click event
a.href = window.URL.createObjectURL(new Blob( ...) ...)
When the player clicks it he gets a 'download file as...' dialog popup

For loading you use a <input type="file" > and when the player clicks it, he gets a system default file browser popup, where he can select the file to load. You use window.FileReader.readAsText() to get the content of the file.

Your save data is usually encoded as json, because it comes right out of the box, but you can make it hard to read using something like base64 encoding (I think Twine does this)

2. Local Storage:
This allows you to store any key-value pair in the browser for any given host. This is somewhere between 2 and 5MB depending on the os and browser. And here's the catch - on Chrome all games/apps run from the hard drive are considered running on the same host, that means that my game, your game, and every twine game in existence share the same 2-5MB - space can run out very fast if you just dump everything into local storage. As far as I know there's no reliable way to tell how much space is left, some browsers simply lie to avoid fingerprinting - so keep in mind that if you are using local storage you might run into problems.
On the other hand - the interface is neat window.localStorage.setItem('who_rulez', 'akabur');

3. IndexedDB:
It's like localStorage only it's a real database. There are still some limits to the size of the data stored, but if your data is too big the browser will usually ask the user to allow for more space. In most cases this won't trigger until you get into a 300MB -100GB range (and if your save is a 100GB, you are doing something wrong!). The interface is not as simple as localStorage, but the real deal-beaker is that it only works if you host your game on a server.

Thankyou, after many googling I have learned on Local Storage which is what I'm learning and using. With your information it made many of my questions clear. Thanks for the help