how to persist values when relaoad happens in input fields before submission?

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 file:

$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..");
                      };
                 });
         };

I want to persist the values in fields even after reloading page before submission. I tried cookies but seems like its not good option to use this. Please provide me some of your suggestions to fix this thing.

Save the values to back end and when loading begins in front end, get the values back from back end. — 6324, Jan 28 '16 at 22:00

Jake Wood · Answer 1 · 2016-01-28T22:12:58.730

2

You can use localStorage, which does not use cookies, and jQuery's .change() so that everytime a form item changes, use localStorage to store its new value, and on page load, get those values, if they exist.

Sample 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());
    });

Then, upon submitting the form, you'll want to reset any localStorage variables you used back to null.

Hope this helps!

edited Jan 28 '16 at 22:12

answered Jan 28 '16 at 22:08

Jake Wood

97
10

1

I don't believe that localStorage is cleared when the browser is closed. https://stackoverflow.com/questions/8537112/when-is-localstorage-cleared – jbg Jan 28 '16 at 22:11
My bad, accidently crossed it with sessionStorage in my head. Updating my post. – Jake Wood Jan 28 '16 at 22:15
Thanks @JakeWood for answering. I will try to do it myself using sessionStorage. – Pallavi Jan 28 '16 at 22:28

how to persist values when relaoad happens in input fields before submission?

1 Answers1