15

I'm developing a HTML5 game and I need to know if updating localStorage properties frequently can slow down the page.

I'm actually storing my hero's position in four localStorage properties (two for the actual position and two for the past position to use in a collision detection system) and updating it every 1 second interval, but I want to update it at 60fps to save every hero movement.

Using localStorage in that frequency can result in performance issues?

2
  • 3
    jsperf is your solution
    – R3tep
    Commented May 15, 2014 at 11:57
  • Are you storing strings. because otherwise you would have to additionally do JSON.parse or stringify. I think that you should also be taken into account. Also, if your player locations are changing too fast, you may skip this and store next. Commented May 15, 2014 at 12:01

2 Answers 2

5

Local storage stores the data on your user's hard drive. It takes a bit longer to read and write to the hard drive than it does to RAM.

The conclusion to take away from this is that you could optimize your performance by reading from local storage on start up and only write to it when the user logs out.

Now, whether or not that optimization will significantly affect your project is something you'll have to figure out, and, as R3tep said, http://jsperf.com/ is a good solution.

My advice, though, is to just go with the optimization anyway, just because it's less "satisfying", I guess, to have a program run more slowly than it could for no good reason.

3
  • Most of the time user won't logout rather close the tab or browser. This solution won't work for web, the tags are js and html not a mobile app. Commented Apr 14, 2020 at 8:00
  • 3
    “Premature optimization is the root of all evil”. I would recommend against optimizing solely because it is "satisfying".
    – mycellius
    Commented Apr 23, 2020 at 3:53
  • 2
    Blindly following advice is even worse. If a micro-optimization is truly easy and predictable, what logic is there in ignoring that optimization? I think a better phrase here is "it depends."
    – Lucas
    Commented Jun 4, 2020 at 20:03
3

Save your data to object {} and save it to locatlStorage then use I/O don't active or when user going away (onunload event):

var DATA = {},
    syncTimer;

function syncFunction () {
    localStorage.set('myData',JSON.stringify(DATA));
}


function someHandler() {
    // some handler that change your DATA
    // which can be called many times per second

    //if calling many times, data will not sync
    if (syncTimer) {
        clearTimeout(syncTimer);
    }

    //change data
    DATA.somefield = 'some data';

    //set timer if data not changed - save it
    syncTimer = setTimeout(syncFunction, 100)
}

window.onunload = syncFunction;

P.S. Test saving to var with saving to storage. Storage sync is more expensive.

1
  • I down-voted because the question is about performance, not strategy. This answer focuses on strategy.
    – Lucas
    Commented Jun 4, 2020 at 20:00

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.