Saving game data to local storage on a website?

Help Networking
, , , ,
1

Question

Im currently working on a web game for school (Think simpler, smaller agar.io or mope.io) and was wondering if its possible to save game data like high-score, player name and MAYBE skin choices to the players local storage on their browsers. The actual website is being done by a classmate who works with JS, and i need to figure out if its too much to ask to implement AND OR what kind of work do I need to do on my side to create a path of least resistance?

I have considered just letting the player create accounts that save the data to the server, but I would like to avoid that to not gunk up the server with excess junk.

BASICALLY How do I make GDscript and JavaScript/HTML be friends and trade info together???

2

I believe saving to user:// with any of the regular FileAccess functions will use IndexedDB, though I’m unsure what format, to extract save data may require some digging through Godot’s source code.

You could use JavaScriptBridge to send and receive data from JavaScript.

1 Like
3

i need to figure out if its too much to ask to implement AND OR what kind of work do I
need to do on my side to create a path of least resistance?

@gertkeno is right that user:// transparently maps to IndexedDB on web exports, that’s
the path of least resistance. Anything you save with FileAccess just works and you don’t
need to think about the browser side at all.

The catch is your classmate’s JS won’t be able to read those values directly because
IndexedDB stores Godot’s data in its own keyspace under the export’s domain. If they need
to display the high score on the website outside the game canvas, that’s where
JavaScriptBridge comes in.

Two patterns:

If only the game needs the data, just FileAccess with user://, done. Page refresh /
browser navigation keeps it.

If the website needs to read/write the data too, use JavaScriptBridge.eval() to call
window.localStorage from Godot, that way both sides talk to the same storage:

JavaScriptBridge.eval("window.localStorage.setItem('high_score', '%d')" % score)
var stored = JavaScriptBridge.eval("window.localStorage.getItem('high_score')")

localStorage has ~5MB per domain which is way more than enough for high score + name +
skin choice. Cleanest is to wrap that in a small Storage singleton in Godot so the rest
of your code doesn’t think about it.

3 Likes