HTML5 localStorage usage

Question

I have a HUGE form that I intend for Quality Assurance personnel to use OFFLINE in the collection of data for Annual Product Quality Reviews. Because of the complexity of the regulatory requirements this form contains over 1900 fields and radio-buttons.

I have currently invoke localStorage via sisyphus.js and it's working - saving the data for all fields just fine.

My problem is that in loading it takes 7 seconds for the form to finish loading - granted it's a long time - but that's not the real issue. My REAL problem is that after making any entry it takes a little over 2 seconds after the onblur event for the form to accept any more input.

Here is my code:

$('form').sisyphus({
    locationBased: false,
    timeout: 10,
    autoRelease: false
});

My question: is there a way to invoke the storage of data at the discretion of the user, perhaps by a button, or some other method, in order to prevent the constant interruptions in data entry?

Anyone have any ideas?

Answer 1

The plugin you're using (sisyphus.js) doesn't seem to have been written for handling a "large" amount of fields.

If you look at the source:

https://raw.githubusercontent.com/simsalabim/sisyphus/master/sisyphus.js

You'll see there's a method saveAllData. Coupled with the bindSaveDataOnChange method, it's saving all fields every time a field is changed.

And, if that wasn't the case, you'd still get the 2 second lag every 10 seconds (timeout option).

A quick fix, I'd hope, would be to fork/modify or override the plugin to null out the bindSaveDataOnChange method, and implement a hook for saving the form data on button click. And, perhaps, removing or increasing the timeout option.