WebStorage Form

index.html

<div class="container">
  <form>
    <h4>Dane Klienta</h4>
    <div class="form-group form-inline">
      <input id="test" type="text" class="form-control" name="client-name" placeholder="Imię">
      <input type="text" class="form-control" name="client-surname" placeholder="Nazwisko">
    </div>
    <div class="form-group form-inline">
      <input type="text" class="form-control" name="client-street" placeholder="Ulica">
      <input type="text" class="form-control" name="client-town" placeholder="Miasto">
      <input type="text" class="form-control" name="client-zipcode" placeholder="Kod Pocztowy">
    </div>
    <h4>Dane Firmy</h4>
    <div class="form-group form-inline">
      <input type="text" class="form-control" name="company-name" placeholder="Nazwa Firmy">
    </div>
    <div class="form-group form-inline">
      <input type="text" class="form-control" name="company-street" placeholder="Ulica">
      <input type="text" class="form-control" name="company-town" placeholder="Miasto">
      <input type="text" class="form-control" name="company-zipcode" placeholder="Kod Pocztowy">
    </div>
    <div class="form-group form-inline">
      <input type="text" class="form-control" name="company-nip" placeholder="NIP">
    </div>
    <div class="form-group row">
      <div class="col-xs-2">
        <label for="client-sum">Kwota</label>
        <input id="client-sum" type="number" class="form-control" name="client-sum">
      </div>
      <label>Stan</label>
      <div class="radio-box">
        <label class="radio-inline">
        <input type="radio" name="invoiceType" id="inlineRadio1" value="option1">wystawiona
</label>
        <label class="radio-inline">
        <input type="radio" name="invoiceType" id="inlineRadio2" value="option2">doręczona
</label>
        <label class="radio-inline">
        <input type="radio" name="invoiceType" id="inlineRadio3" value="option3">opłacona
</label>
        <label class="radio-inline">
        <input type="radio" name="invoiceType" id="inlineRadio4" value="option4">spóźniona
</label>
      </div>
    </div>
    <button type="submit" class="btn btn-primary" name="submit">Zapisz</button>
    <small id="changeTimer"></small>
</form>
</div>

script.js

(function() {
  var form = document.querySelector("form"),
      formFields = form.querySelectorAll("input[name]:not([type='submit'])");
  
  function fieldSave() {
    for(var i = 0; i < formFields.length; i++) {
        formFields[i].onchange = saveFieldToStorage;
    }
  }
  
  function saveFieldToStorage() {
    window.localStorage.setItem(this.name, this.value);
    setTime();
  }
  
  function fieldLoad() {
    for (var key in window.localStorage){
      if (key !== "invoiceType" && key !== "date") {
        document.querySelector("input[name='" + key + "']").value = localStorage[key];
      }
    }
    
    if (window.localStorage.invoiceType) {
      var radioChecked = window.localStorage.invoiceType;
      document.querySelector("[value='" + radioChecked + "']").checked = true;
    }
    
    document.querySelector("#changeTimer").textContent = window.localStorage.date;
  }

  function setTime() {
    var currentdate = new Date();

    if(currentdate.getMinutes() < 10) {
      var currentMinutes = "0" + currentdate.getMinutes()
    } else {
      var currentMinutes = currentdate.getMinutes()
    }

    var datetime = "Ostatnio zapisano: " 
                  + currentdate.getDate() + "."
                  + (currentdate.getMonth()+1)  + "." 
                  + currentdate.getFullYear() + " "  
                  + currentdate.getHours() + ":"  
                  + currentMinutes;

    window.formChange = datetime.toString();
    document.querySelector("#changeTimer").textContent = window.formChange;
    
    window.localStorage.setItem("date", window.formChange);
  }
  
  if ("localStorage" in window) {
    fieldLoad();
    fieldSave();
  }
  
})();

style.css

.radio-box{
  padding-top: 6px;
}

small {
  padding-left: 20px;
}

styles

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

webstorage-form.markdown

WebStorage Form

A Pen by Adam Kowal on CodePen.

License.