如何将LocalStorage与动态表单一起使用

Question

我有一个动态表单，其中包含文件上传器，datepickers，select2，ajax级联下拉列表，...表单中的元素名称是在文档就绪时动态设置的。

对于在LocalStorage中正确存储datepickers格式我使用Lockr API包装器进行localStorage，但我遇到文件上传器问题，select2 ajax级联下拉列表。对于ajax级联下拉列表，子下拉列表未填充，我认为这是因为未完成ajax请求。

是否有完整的解决方案将LocalStorage与动态表单一起使用，如上所述？

$(document).ready(function () {

    function getDataFromLocalStorage() {

        if (typeof (Storage) !== "undefined" && window.location.pathname.toLowerCase().indexOf("add") > -1) {
            // if browser support local storage and this is add mode

            var orderLedgerIntId = $(".orderLedgerIntId").val();
            var orderTypeIntIds = $(".orderTypeIntIds").val();
            var name = orderLedgerIntId;
            if (name.trim() === "") {
                var replacedOrderTypeIntIds = orderTypeIntIds.replace(",", "$");
                name = replacedOrderTypeIntIds;
            }

            var islocalStorageExists = false;

            $(".element").each(function () {
                var localStorageItem = Lockr.get(name +
                    "_" +
                    $(this).closest(".dataGroup").find(".elementType").val() +
                    "_" +
                    $(this).attr("name"));
                if (localStorageItem) {
                    if ($(this).val().trim() == "") {
                        islocalStorageExists = true;
                        if ($(this).is("select"))
                            $(this).val(localStorageItem).trigger("change");
                        else
                            $(this).val(localStorageItem);
                    }

                }

            });

            if (islocalStorageExists) {
                alert("your order not comlpeted");
            }

        }

    }

    getDataFromLocalStorage();

    $("input,textarea,select").change(function () {

        if (typeof (Storage) !== "undefined") {

            $('[type=text], textarea').each(function () {
                this.defaultValue = this.value;
            });
            $('[type=checkbox], [type=radio]').each(function () {
                this.defaultChecked = this.checked;
            });
            $('select option').each(function () {
                this.defaultSelected = this.selected;
            });

            var orderLedgerIntId = $(".orderLedgerIntId").val();
            var orderTypeIntIds = $(".orderTypeIntIds").val();
            var name = orderLedgerIntId;
            if (name.trim() === "") {
                var replacedOrderTypeIntIds = orderTypeIntIds.replace(",", "$");
                name = replacedOrderTypeIntIds;
            }

            Lockr
                .set(name + "_" + $(this).closest(".dataGroup").find(".elementType").val() + "_" + $(this).attr("name"),
                $(this).val());


        }

    });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>