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?

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?

• javascript
• html
• canvas
• local-storage

• 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. – Ashish Negi Commented May 15, 2014 at 12:01

2 Answers 2

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./ 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.

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.