Local storage and number of saves

Hey all,

Just wanted to talk a little about my trials and tribulations in the realm of Q6's save/load system in case it's helpful for someone. I think that the idea of using local storage is great for the saves, but I've found that it runs into one major issue - storage quotas. Most browsers (including Chrome and Edge) seem to limit one app's local storage quota to 5 MB, which isn't a lot at all for plain text blobs as large as what Quest6 can generate (the game I am working on is large, but not huge, and generates a blob of ~400 kB of plain text). I've had several testers comment on "no longer being able to save the game after a certain point" and every time, it came down to a quota issue as they'd generated 10+ saves at that point.

Now, I'm by no means an expert, but as far as I can tell, there's no simple way of increasing local storage quotas short of the user themselves editing and recompiling their browsers. So instead, I kludged together some functions to handle allowing the user to save/load their game from disk. (And I would love if anyone has suggestions for cleaning this up haha. Again, I'm just an amateur at this.)

Saving the game (note, this would be easy to make as a global command, but for testing I was using it as an attribute function on an object). This is pretty easy using functions from the FileSaver.js library. (https://github.com/eligrey/FileSaver.js/)

<script src="lib/_filesaver.js"></script>
msg("<b>What will you name your entry?</b>")
askQuestion("", function(result){
	var comment = settings.saveComment ? settings.saveComment() : "-"
	var s = saveLoad.saveTheWorld(comment)
	var myFile = new File([s], result+".rcv", {type: "text/plain;charset=utf-8"})
	saveAs(myFile)
	msg("Your entry "+result+".rcv should now download.")
})

Loading the game is harder to do due to the security limitations of accessing the client-side filesystem with JS. I ended up using an HTML input file element. A click to this element is generated when the "load" command is used, allowing the user to define a file to upload and read. This triggers a field.onchange function that reads the file and calls the JS function responsible for parsing it. The field is then cleared so that the same save file can be loaded multiple times in a row (because otherwise field.onchange won't trigger again if the file hasn't changed.)

function extraStorageLoader(){
	try {
		document.getElementById('fileDialogId').click()
	} catch(e) {
		msg("Load aborted.")
	}
}
<form style="display:none">
	<input type="file" id="fileDialogId" accept=".rcv"/>
</form>
<script>
	var fileload = function(){
		var fileInput = document.querySelector("#fileDialogId");
		var fileIn = fileInput.files;
		
		let reader = new FileReader();
		reader.readAsText(fileIn[0])
		
		reader.onload = function(){
			loadGameFile(fileIn[0].name, reader.result)
			var $el = $('#fileDialogId');
			$el.wrap('<form>').closest('form').get(0).reset();
			$el.unwrap();
		};
		
		reader.onerror = function(){
			console.log(reader.error);
		};
	}
	document.querySelector("#fileDialogId").onchange=fileload;
</script>
function loadGameFile(filename, contents){
	try {
		if (contents != null) {
			//Check the start of the header to make sure the file is what is expected
			if(contents.substring(0,8) == "GAMENAME"){
				saveLoad.loadTheWorld(contents, 4)
				clearScreen()
				metamsg("Loaded file \"" + filename + "\"")
				if (settings.afterLoad) settings.afterLoad(filename)
				game.room.description()
			} else {
				msg("Improperly formatted file.")
			}
		}
		else {
			metamsg(lang.sl_file_not_found);
		}
	} catch(e) {
		msg("Load failed. Please try again.")
	}
}

Hope this ends up being useful for someone else!

P.S. Forgive my poor code formatting! I am not a programmer!


Thanks for ths - you raise a good point. I do wonder how big your game is; testers for The House on Highfield Lane did not encounter this issue.

I will look at incorporating your code over the next few days, possibly giving the author or player the option to choose.


I have uploaded to GitHub a solution, though it is not in a release yet. Details here:
https://github.com/ThePix/QuestJS/wiki/Save-Load


Log in to post a reply.

Support

Forums