2

I'm working on a visualforce page that will act as a questionnaire. However, given that some of the questions that will be asked may take time to answer, I'd like to know if there is a way to have data entered into fields on a form saved automatically. I've written many VF pages and Apex classes, but I am unsure where to proceed on this particular request, though I am sure it's possible. I haven't seen any posts here directly tackling this question, hence my posting my own.

Any assistance here would be great!

1 Answer 1

5

You can use localStorage or sessionStorage, available in 94% of all browsers globally, to unobtrusively store and load data on demand. Save formats may not be compatible across changes to the page, though, so some caution. And, of course, there is a 5MB limit on most systems, so you may have to choose what to save.

You need just two functions. One that triggers onChange and onSelect, so you can write the value to localStorage, and an onLoad function to restore those values.

Make sure that you only store those values that come from your own form, and make sure you specifically do not store the view state, or funny (as in weird/annoying funny, not haha funny) things may happen.

A quick Google search should yield code you can fairly easily adapt. I actually wrote one myself recently, but I can't seem to find it right now. I do know it was in plain vanilla JavaScript, and it turned out to be about thirty lines of code.

So, I decided to rewrite it. Here's my very plain, very simple implementation to help you get started:

(function(window, document, undefined) {
    function changeSelect(event) {
        if(event.target.type=='checkbox' || event.target.type=='radio') {
            window.localStorage.setItem(event.target.id, event.target.checked?'checked':'unchecked');
        } else {
            window.localStorage.setItem(event.target.id, event.target.value);
        }
    }
    function load(event) {
        var i = 0, k, e;
        while(i < window.localStorage.length) {
            k = window.localStorage.key(i++);
            e = document.getElementById(k);
            if(e) {
                if(e.type=='checkbox' || e.type=='radio') {
                    e.checked = window.localStorage.getItem(k)=='checked';
                } else {
                    e.value = window.localStorage.getItem(k);
                }
            }
        }        
    }
    function clearData(event) {
        window.localStorage.clear();
    }
    window.addEventListener('load', load, true);
    window.addEventListener('change', changeSelect, true);
    window.addEventListener('select', changeSelect, true);
    window.addEventListener('submit', clearData, true);
})(window, document)

Additional work to do on this might include not restoring "password" type fields, supporting additional types, possibly providing a means of clearing the storage early, saving an entire form instead of just lazily saving data as it comes in, limiting yourself to just one form, and so on.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .