Использование jQuery для хранения состояния сложной формы

Вот несколько функций, которые помогут в этом процессе. formToString сериализует форму как строку, а stringToForm делает обратное:

function formToString(filledForm) {
    formObject = new Object
    filledForm.find("input, select, textarea").each(function() {
        if (this.id) {
            elem = $(this);
            if (elem.attr("type") == 'checkbox' || elem.attr("type") == 'radio') {
                formObject[this.id] = elem.attr("checked");
            } else {
                formObject[this.id] = elem.val();
            }
        }
    });
    formString = JSON.stringify(formObject);
    return formString;
}
function stringToForm(formString, unfilledForm) {
    formObject = JSON.parse(formString);
    unfilledForm.find("input, select, textarea").each(function() {
        if (this.id) {
            id = this.id;
            elem = $(this); 
            if (elem.attr("type") == "checkbox" || elem.attr("type") == "radio" ) {
                elem.attr("checked", formObject[id]);
            } else {
                elem.val(formObject[id]);
            }
        }
    });
}

Использование:

// Convert form to string
var formString = formToString($("#myForm"));
// Save string somewhere, e.g. localStorage
// ...

// Restore form from string
stringToForm(formString, $("#myForm"));

Я бы начал с использования подключаемого модуля jQuery dumbFormState.

Этот плагин фактически автоматически сохраняет данные, пока вы печатаете и т. Д., Поэтому, когда они возвращаются, он уже снова заполнен, и для этого вам не нужна серверная сторона.

После этого я бы создал дополнительный jQuery для загрузки после плагина dumbFormState, чтобы затем показать / скрыть заполненные области. Нет проблем, если вы вызовете это до того, как кто-то когда-либо заполнил свою форму, потому что она будет пустой, и ваша логика в любом случае не должна отображать / скрывать пустые вещи.

Я думаю, вы ищете .serialize (), который сериализует form data. Для этого ваши input элементы должны находиться в пределах form tag плюс, все они должны иметь name атрибуты.

var form1data = $('#form1').serialize();

alert(form1data);

Вы можете просто поместить данные, которые не являются данными по умолчанию, в json, а затем отправить их через почтовый запрос на сервер для сохранения.

Итак, как только человек возвращается на страницу, вы автоматически смотрите, есть ли у него что-то сохраненное, и вы можете либо спросить, хотят ли они это использовать, либо заполнить форму из сохраненных данных.

Сохранение значений по умолчанию - это пустая трата полосы пропускания, поскольку вы все равно не измените ее с той формы, которая была на момент загрузки.

ОБНОВЛЕНИЕ:

Чтобы сохранить его как JSON, я думаю, было бы достаточно просто построить его в длинную строку, поскольку формат прост, поэтому вы просто отправите все как одну строку.

Вы также можете сохранить этап, на котором они находятся, или автоматически сохранять, когда они переходят на каждый этап, что может быть лучшим вариантом, в случае сбоя их компьютера им не придется запускать сначала сначала, но вы можете хотите, чтобы это было включено с помощью флажка, чтобы включить автосохранение.