<form class="save-me" id="save-me">

  <label for="name">Name</label>
  <input type="text" name="name" id="name">

  <label for="address">Address</label>
  <input type="text" name="address" id="address">

  <label for="email">Email</label>
  <input type="email" name="email" id="email">

  <label for="hear-about-us">How did you hear about us?</label>
  <select name="hear-about-us" id="hear-about-us">
    <option value=""></option>
    <option value="google">Google</option>
    <option value="referral">Referred by a Friend</option>
    <option value="tv">A TV Ad</option>
    <option value="radio">A Radio Ad</option>
  </select>

  <label for="more">Additional thoughts?</label>
  <textarea name="more" id="more"></textarea>

  <p><strong>Do you agree to our terms of service?</strong></p>
  <label>
    <input type="radio" name="tos" value="yes">
    Yes
  </label>
  <label>
    <input type="radio" name="tos" value="no">
    No
  </label>

  <p><strong>Pick your favorite super heros.</strong></p>

  <label>
    <input type="checkbox" name="spiderman">
    Spiderman
  </label>

  <label>
    <input type="checkbox" name="wonderwoman">
    Wonder Woman
  </label>

  <label>
    <input type="checkbox" name="blackpanther">
    Black Panther
  </label>

  <p>
    <button type="submit">Submit</button>
  </p>

</form>
 
<script>
  var storagePrefix = 'form-autosave-single-other-types_';

  var getID = function (field) {
    if (field.id.length > 0) {
      return field.id;
    }

    if (field.name.length > 0) {
      return field.name
    }
    return null;
  };

  var loadData = function () {

    // get localstorage data
    var saved = localStorage.getItem(storageID);
    if (!saved) return;
    saved = JSON.parse(saved);

    // Get all of the form fields
    var fields = document.querySelectorAll('#save-me input, #save-me textarea, #save-me select');

    // Loop through each field and load any saved data in localStorage
    Array.prototype.slice.call(fields).forEach(function (field) {

      // If the field has no usable ID, skip it
      var id = getID(field);
      if (!id) return;

      // If there's no saved data in localStorage, skip it
      if (!saved[id]) return;

      // Set the field value to the saved data in localStorage
      // if it is a checkbox, set its checked state
      // if it is a radio button and its value matches, set its checked state
      // otherwise, set the value
      if (field.type === 'checkbox') {
        field.checked = saved[id] === 'on' ? true : false;
      } else if (field.type === 'radio') {
        field.checked = saved[id] === field.value ? true : false;
      } else {
        field.value = saved[id];
      }
    });
  };

  var inputHandler = function (event) {
    // only run for fields in the #save-me form
    if (!event.target.closest('#save-me')) return;

    // get an id for the field
    var id = getID(event.target);
    if (!id) return;

    // get existing data from localstorage
    var saved = localStorage.getItem(storageID);
    saved = saved ? JSON.parse(saved) : {}

    // add the field to the localstorage object
    // if it is a checkbox, use on/off values
    // otherwise, save the value
    if (event.target.type === 'checkbox') {
      saved[id] = event.target.checked ? 'on' : 'off';
    } else {
      saved[id] = event.target.value;
    }

    // save the object back to localstorage
    localStorage.setItem(storageID, JSON.stringify(saved));
  };

  var submitHandler = function (event) {
    if (event.target.id !== 'save-me') return;

    localStorage.removeItem(storageID);
  }

  loadData();
  document.addEventListener('input', inputHandler);
  document.addEventListener('submit', submitHandler);

</script>