我有一个巨大的表单,其中有很多输入、文本区域和复选框。该表格上有一个验证码。我想使用 localStorage
在本地保存表单答案,这样如果验证码返回 fail
,它们的表单数据将被重新填充。
HTML
<form name="wellnessForm" id="wellnessForm" action="confirm.php" method="POST">
<input type="text" name="firstName" />
<br/>
<input type="checkbox" name="noConcernsChk[]" value="1" />
<input type="checkbox" name="noConcernsChk[]" value="2" />
<br/>
<textarea>
</textarea>
</form>
jQuery
// DOM ready
$(function(){
$(':text').blur(function(e){
localStorage.setItem("flag", "set");
var data = $('#wellnessForm').serializeArray();
$.each(data, function(i, obj){
localStorage.setItem(obj.name, obj.value);
});
});
$(':checkbox').click(function(e){
localStorage.setItem("flag", "set");
var data = $('#wellnessForm').serializeArray();
$.each(data, function(i, obj){
localStorage.setItem(obj.value, e.checked);
});
});
// test if there is already saved data
if( localStorage.getItem("flag") == "set" ){
var data = $("#wellnessForm").serializeArray();
// have to select the valid inputs based on their name attribute
$.each(data, function(i, obj){
// check if checkbox
if(obj.name == 'noConcernsChk[]'){
$( "[value='"+obj.value+"']:checkbox" ).prop('checked', true);
}
else{
$("[name='" + obj.name + "']").val(localStorage.getItem(obj.name));
}
});
}
// provide mechanism to remove data (TODO: remove actual data not just kill the flag)
$("#clearData").click(function(e){
e.preventDefault();
localStorage.setItem("flag", "");
});
});
我走了多远
正如您从我的示例中看到的,我可以使用文本输入。然而我被困在复选框上。我想让 localStorage
记住这些框是否被选中,如果是,请在用户的表单中重新检查它们。我还没有让 textarea 工作,但这应该不会太难。
问题
如何将复选框状态存储到本地存储,然后调用它(并选中正确的框)?
最佳答案
localStorage 只能存储字符串值。
首先,你必须将数据序列化使用jQuery.serialize ,然后你可以像这样存储它
localStorage['data']=$('form').serialize()
编辑
为了恢复,你必须制定一些规则。在标签中添加数据绑定(bind)
,将表单值保存为键/值对,键为数据绑定(bind)
,然后您可以恢复它。
类似这样的事情
var data = {};
$('[data-binding]')
.each(function(){ data[$(this).data('binding')] = $(this).serialize(); })
localStorage['data'] = JSON.stringify(data);
用于恢复
var data = JSON.parse(localStorage['data']);
$('[data-binding]')
.each(function()
{
// handle the set value
// need consider the different value type for different field type
var $this = $(this);
var val = data[$this.data('binding')];
// for chechbox
if($this.is('[type=checkbox]'))
$this.prop('checked',val)
// for others
else
$this.val(val);
})
我的代码中的示例:
// u5 = utils
U5 = {};
/**
* 加载配置到界面,data-setting属性指定setting项
* @param setting
*/
U5['LoadSettingToUI'] = function (setting)
{
$('[data-setting]')
.each(function()
{
var $this = $(this);
var val;
val = setting[$this.data('setting')];
// 根据不同的类型进行值的转换 for jquery mobile
if($this.is('select[data-role=slider]'))// 这里没有使用jqmData来判断,考虑兼容问题
{
$this.val(val?'on':'off');
}else if($this.is('[type=checkbox]'))
{
$this.prop('checked',!!val);
}else{
$this.val(val);
}
});
};
/**
* 从页面获取配置,data-setting属性指定setting项
* @return {object}
*/
U5['GetSettingFromUI'] = function ()
{
var setting = {};
$('[data-setting]').each(function()
{
var $this = $(this);
/**
* @type {string|boolean}
*/
var val;
val = $this.val();
// 根据不同的类型进行值的转换
if(/^on|off$/.test(val))
{
val = val === 'on';
}else if($this.is('[type=checkbox]'))
{
val = $this.prop('checked');
}
//
setting[$this.data('setting')] = val;
});
return setting;
};
完整演示 here
关于javascript - 如何使用 localStorage 保存表单数据(文本、文本区域和复选框)?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18856272/