1

所以我有这个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制作的一个工作示例，我刚刚添加了window.localStorage(...)

顺便说一句：有超过 100 个字段，而不仅仅是示例中的 3 个。

4

1 回答 1

1

我找到了一种从 URL 获取 JSON 的方法，并进行了修改以满足 localStorage 标准。

Jan Turoň 在这篇文章中的原始功能：

    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;
}

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

希望这对任何人都有帮助。

于 2013-11-12T13:17:45.240 回答