javascript - 提交前在输入字段中发生 relaoad 时如何保留值？

Question

HTML:

<form name="shippingForm" class="form-horizontal" role="form">
  <div class="form-group">
    <p class="control-p col-sm-2" for="Address">Address Line1<b class="h4-color">*</b>:</p>
    <div class="col-sm-10">
      <input type="text" name="Address" placeholder="Address Line1" ng-model="shipping.addressLine1" class="input-width" ng-init ="shipping.addressLine1" required /><span class="custom-error" ng-show="shippingForm.Address.$dirty && shippingForm.Address.$error.required">Required.</span>
    </div>
</div>
<div class="form-group">
    <p class="control-p col-sm-2" for="Address2">Address Line2:</p>
    <div class="col-sm-10">
        <input type="text" name="AddressLine" placeholder="Address Line2" ng-model="shipping.addressLine2" class="input-width" />
    </div>
</div>

<button type="submit" class="pull-right btn div-margin-left" ng-disabled ="shippingForm.$invalid "ng-click="saveShipping(shipping)">CONTINUE</button>
</form>

js文件:

$scope.saveShipping = function(shippingDetails){     
             var userData = storeLocally.get('userInfo');   
             var addr = "Shipping";

                if (userData.customerId){
                     addShippingInfo(shippingDetails,userData.customerId,addr);
                }
                else {        
                    storeLocally.set('shipInfo', shippingDetails);
                    //$location.path(path);
                }
         };         

         function addShippingInfo(shipAdd, custId, addr){

             appServices.addAddress(shipAdd, custId, addr).then(function (d){
                if (d){
                        storeLocally.set('shipInfo', shippingDetails);
                        //console.log("inside function", shippingDetails);
                        //$location.path(path);
                    }           
                 },
                  function (d) {
                      if (d.status == 500) {
                          window.alert("Oops! some problem here..");
                      };
                 });
         };        

即使在提交前重新加载页面后，我也想保留字段中的值。我试过 cookies 但似乎使用它不是一个好的选择。请向我提供一些解决此问题的建议。

Answer 1

您可以使用不使用 cookie 的 localStorage 和 jQuery 的 .change() 以便每次表单项更改时，使用 localStorage 存储其新值，并在页面加载时获取这些值(如果存在)。

示例 HTML

<input type="text" id="name" />

Javascript

if(localStorage.getItem("name") != null)
    {
    $('#name').val() = localStorage.getItem("name");
    }

$('#name').change(function()
    {
    localStorage.setItem("name", $('#name').val());
    });

然后，在提交表单时，您需要将您使用的所有 localStorage 变量重置为 null。

希望这对您有所帮助!