javascript - 如何使用 localStorage 保存表单数据(文本、文本区域和复选框)？

Question

我有一个巨大的表单，其中包含大量 输入、文本区域和复选框。表格上有一个验证码。我想用 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