Question

所以我有这个js文件将表单数据存储在本地存储中：

$(document).on('pageinit', function() { // dom ready handler for jQuery Mobile

    $('#form1').validate({ // initialize form 1
        // rules
    });

    $('#gotoStep2').on('click', function() { // go to step 2
        if ($('#form1').valid()) {
            // code to reveal step 2 and hide step 1
        }
    });

    $('#form2').validate({ // initialize form 2
        // rules
    });

    $('#gotoStep3').on('click', function() { // go to step 3
        if ($('#form2').valid()) {
            // code to reveal step 3 and hide step 2
        }
    });

    $('#form3').validate({ initialize form 3
        // rules,
        submitHandler: function (form) {
           // serialize and join data for all forms
           var data = $('#form1').serialize() + '&' + $('#form2').serialize() + '&' + $(form).serialize();
           window.localStorage.setItem('formData',data);
           // ajax submit
           return false; // block regular form submit action
        }
    });

    // there is no third click handler since the plugin takes care of this 
    // with the built-in submitHandler callback function on the last form.

});

它完成了这项工作，但如果用户进入网站以验证各自字段中的数据是否正确，我不知道如何检索该信息以预填充表单。如果字段是单独存储的，我知道怎么做，但如果它像示例一样序列化，我不知道怎么做。

Sparky制作了example，我刚刚添加了window.localStorage(...)

BTW：示例中有超过100个字段而不仅仅是3个字段。

Answer 1

我找到了一个从URL获取JSON的方法，我修改了它以符合localStorage标准。

JanTuroň在post中的原始功能：

    function getJsonFromUrl() {
  var query = location.search.substr(1);
  var data = query.split("&");
  var result = {};
  for(var i=0; i<data.length; i++) {
    var item = data[i].split("=");
    result[item[0]] = item[1];
  }
  return result;
}

这是修改后的版本：

function getFormFromLocalStorage(station,set,container) {
  var query = ls.getItem(station+set+container); 
  var data = query.split("&");
  var result = {};
  for(var i=0; i<data.length; i++) {
    var item = data[i].split("="); 
    $('#'+item[0]).val(item[1]);
  }
  return result;
}

此函数的输出是一个数组，在我的情况下，将使用表单中提交的先前输入自动填写表单。

希望这有助于任何人。

如何从存储在localStorage中的表单数据填充表单？

1 个答案: