将值从本地存储放回 html 表单答案

【问题标题】：putting back values from local storage to html form将值从本地存储放回 html 表单
【发布时间】：2017-11-14 22:40:05
【问题描述】：

我正在尝试缓存我的表单数据，以便如果用户失去互联网连接并且他们回来并通过本地存储恢复信息。我创建了一个本地存储，我在其中以 JSON 格式存储整个表单。刷新页面后，我想显示存储在本地存储中的数据以自动填充到字段中。我检查了Populate HTML form with data saved on Local Storage，但它对我不起作用。我想要的方式。我的值没有以本地存储中的形式加载。刷新时如何加载带有本地存储值的表单？

$(document).ready(function() {
  window.onload = dataLoad();
});

function dataLoad() {
  if (localStorage.getItem('testObject') !== null) {
    var inputParse = JSON.parse(localStorage.getItem('testObject'));
    $.each(inputParse, function(key, value) {
      var field = document.querySelector("[name=" + key + "]");
      if (field.type == 'radio' || field.type == 'checkbox') {
        field.checked = field.value == value;
      } else {
        field.value = value;
      }
    });
  }
}

function CacheData() {
  var yourObject = $('#application-form').serializeObject();
  localStorage.setItem('testObject', JSON.stringify(yourObject));
}
jQuery.fn.serializeObject = function() {
  var formData = {};
  var formArray = this.serializeArray();
  for (var i = 0, n = formArray.length; i < n; ++i)
    formData[formArray[i].name] = formArray[i].value;
  return formData;
};

<html>

<body>
  <div class="container body-content">
    <form id="application-form" action="/Application/Edit/2" method="post">
      <input type="submit" value="Save" class="btn btn-default navbar-btn" id="save-application" onclick="CacheData()" />
      <div class="form-horizontal" id="wrapper">
        <div class="form-group hidden">
          <label class="col-md-2 control-label" for="ApplicationId">Application No.</label>
          <div class="col-md-10">
            <input class="form-control" type="number" data-val="true" data-val-required="The Application No. field is required." id="ApplicationId" name="ApplicationId" value="2" />
            <span class="text-danger field-validation-valid" data-valmsg-for="ApplicationId" data-valmsg-replace="true"></span>
          </div>
        </div>
        <div id="client" class="panel panel-default">
          <div id="client-collapse" class="panel-collapse collapse in">
            <div class="panel-body">
              <div class="form-group">
                <label class="col-md-2 control-label" for="ClientId">Client ID</label>
                <div class="col-md-10">
                  <input class="form-control input-right-align" readonly type="number" id="ClientId" name="ClientId" value="2" />
                </div>
              </div>
              <div class="form-group">
                <label class="col-md-2 control-label" for="Client_FirstName">First Name</label>
                <div class="col-md-4">
                  <input class="form-control" readonly type="text" data-val="true" data-val-length="The field First Name must be a string with a maximum length of 100." data-val-length-max="100" id="Client_FirstName" name="Client.FirstName" value="Test" />
                </div>
                <label class="col-md-2 control-label" for="Client_LastName">Last Name</label>
                <div class="col-md-4">
                  <input class="form-control" readonly type="text" data-val="true" data-val-length="The field Last Name must be a string with a maximum length of 100." data-val-length-max="100" id="Client_LastName" name="Client.LastName" value="Tester" />
                </div>
              </div>
            </div>
          </div>
        </div>
       
        
        <div id="asa" class="panel panel-default">
          Alternate Signing Authority
          <div id="asa-collapse" class="panel-collapse collapse in">
            <div class="panel-body">
              <table class="table">
                <thead>
                  <tr>
                    <th>ID</th>
                    <th>Name</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td class="col-sm-2 col-xs-3">
                      <input type="hidden" data-val="true" data-val-required="The Application ID field is required." id="AlternateSigningAuthorities_0__ApplicationId" name="AlternateSigningAuthorities[0].ApplicationId" value="2" />
                      <input type="hidden" data-val="true" data-val-length="The field Created By must be a string with a maximum length of 255." data-val-length-max="255" id="AlternateSigningAuthorities_0__CreatedBy" name="AlternateSigningAuthorities[0].CreatedBy" value="PilotUser"
                      />
                      <input type="hidden" data-val="true" data-val-length="The field Last Modified By must be a string with a maximum length of 255." data-val-length-max="255" id="AlternateSigningAuthorities_0__ModifiedBy" name="AlternateSigningAuthorities[0].ModifiedBy"
                        value="Unknown" />
                      <input type="hidden" data-val="true" data-val-required="The Client ID field is required." id="AlternateSigningAuthorities_0__ClientId" name="AlternateSigningAuthorities[0].ClientId" value="2" />
                      <input type="hidden" data-val="true" data-val-length="The field First Name must be a string with a maximum length of 100." data-val-length-max="100" id="AlternateSigningAuthorities_0__Client_FirstName" name="AlternateSigningAuthorities[0].Client.FirstName"
                        value="Test" />
                      <input type="hidden" data-val="true" data-val-length="The field Last Name must be a string with a maximum length of 100." data-val-length-max="100" id="AlternateSigningAuthorities_0__Client_LastName" name="AlternateSigningAuthorities[0].Client.LastName"
                        value="Tester" /> 2
                    </td>
                    <td>
                      Tester, Test
                    </td>
                    <td class="pull-right">
                      <input type="submit" value="Remove" class="btn btn-default input-responsive" formaction="/Application/Edit/2?removeAsa=0" />
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
        
          <div id="emi" class="panel panel-default">
            <div id="emi-collapse" class="panel-collapse collapse in">
              <div class="panel-body">
                <div class="form-group">
                  <label class="col-md-2 control-label" for="EmiDeductible">EMI Base Deductible</label>
                  <div class="col-md-10">
                    <input class="form-control input-right-align" id="EmiDeductible" name="EmiDeductible" type="text" data-val="true" data-val-emi-deduct="Must be a multiple of 5, no less than 5, and no greater than 60&#x200E;" data-val-number="The field EMI Base Deductible must be a number."
                      value="40.00" />
                    <span class="text-danger field-validation-valid" data-valmsg-for="EmiDeductible" data-valmsg-replace="true"></span>
                  </div>
                </div>
                <div class="form-group">
                  <label class="col-md-2 control-label" for="EmiReducedDeductibleOption">EMI Reduced Deductible Option&#x200E;</label>
                  <div class="col-md-10">
                    <div class="checkbox">
                      <input checked="checked" data-val="true" data-val-required="The EMI Reduced Deductible Option&#x200E; field is required." id="EmiReducedDeductibleOption" name="EmiReducedDeductibleOption" type="checkbox" value="true" />
                    </div>
                  </div>
                </div>
                <div class="form-group">
                  <label class="col-md-2 control-label" for="EmiHighDollar">EMI High Dollar</label>‎
                  <div class="col-md-10">
                    <div class="checkbox">
                      ‎<input checked="checked" data-val="true" data-val-required="The EMI High Dollar field is required." id="EmiHighDollar" name="EmiHighDollar" type="checkbox" value="true" /></div>
                    <div id="emi-base-deductible-high-dollar-value" class="row">
                      <div class="col-sm-2"> ‎
                        <select ‎ ‎ class="form-control input-sm" data-val="true" data-val-number="The field DollarId must be a number." id="DollarId" name="DollarId"><option value="100.00">$100</option>
<option selected="selected" value="75.00">$75</option>
</select></div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div id="signature" class="panel panel-default">
            <div data-toggle="collapse" href="#signature-collapse" class="panel-heading collapse-toggle">
              Signature
              <span class="glyphicon glyphicon-chevron-up pull-right collapse-arrow"></span>
            </div>
            <div id="signature-collapse" class="panel-collapse collapse in">
              <div class="panel-body">
                <table class="table">
                  <thead>
                    <tr>
                      <th>
                        Required
                      </th>
                      <th>
                        Name
                      </th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <td>
                        <input id="signature-required-0" type="checkbox" onchange="updateSignatureRequiredValue(0, this.checked)" />
                      </td>
                      <td>
                        Tester, Test
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <input id="signature-required-1" type="checkbox" checked="checked" onchange="updateSignatureRequiredValue(1, this.checked)" />
                      </td>
                      <td>
                        Test2, Test2
                      </td>
                    </tr>
                  </tbody>

                </table>
              </div>
            </div>
          </div>
        </div>
    </form>
    <hr />
    </div>
</body>

</html>

【问题讨论】：

key 是表单元素的名称而不是 id

标签： javascript caching local-storage

【解决方案1】：

几个问题

是窗口，不是窗口
它是window.onload=dataLoad; 没有 ()
如果你使用字段名，那么你需要这样做
field = document.querySelector("[name="+key+"]");
您有多个同名收音机，您可能需要循环播放
field.checked = value; 不是你想要的，但是
field.checked = field.value==value
你需要包含 jQuery
由于你使用 jQuery，你不需要 1 和 2：

$(function() {
  dataLoad();
});

【讨论】：

即使在进行了建议的更改之后，我也没有从本地存储中获取值。
令人惊讶的是完全没有错误。但价值并没有被覆盖。
请用 html 更新您的问题。如果你点击<>，你可以创建一个minimal reproducible example
我已经添加了 html 代码。现在可以请您指导吗？
嗨蒂娜。不，您已经添加了 ASP 代码。我不能使用 ASP。请张贴minimal reproducible example，其中包含足够的字段来测试问题。右键单击您的网页并将html复制到sn-p中（单击<>创建一个）