Question

我有一个巨大的表单，其中包含很多的输入，textareas和复选框。表单上有一个验证码。我希望使用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", "");
    });

});

^{Source on codepen}

我走了多远
正如您在我的示例中所看到的，我有文本输入工作。但是我坚持使用复选框。我想让localStorage记住盒子是否被检查，如果是，请在表格中为用户重新检查。我还没有得到textarea工作，但这不应该太难。

问题
如何将复选框状态存储到本地存储，然后调用它（并选中正确的复选框）？

Answer 1

localStorage只能存储字符串值。

首先，您必须使用jQuery.serialize序列化数据，然后您可以将其存储为

localStorage['data']=$('form').serialize()

修改

要进行还原，您需要制定一些规则。添加data-binding标记，将表单值保存为键/值对，键为data-binding，然后您可以将其恢复。

像这样的东西

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

Answer 2

另一种选择是使用现有的插件。

例如persisto是一个开源项目，它为localStorage / sessionStorage提供了一个简单的接口，并自动为表单字段（输入，单选按钮和复选框）提供持久性。
（免责声明：我是作者。）

请注意，这需要jQuery作为依赖项。

例如：

<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 name="detailsText">
  </textarea>
</form>

可以像这样处理：

// Maintain client's preferences in localStorage:
var store = PersistentObject("wellnessData");

// Initialize form elements with currently stored data
store.writeToForm("#wellnessForm");

// Allow users to edit and save settings:
$("#wellnessForm").submit(function(e){
  // ... maybe some validations here ...
  store.readFromForm(this);
  e.preventDefault();
});

如何使用localStorage保存表单数据（text，textarea＆amp; checkbox）？

2 个答案: