SO53053563

<!DOCTYPE html>
<html>

<head>
  <meta charset='utf-8'>
  <style>
    html {font: 400 16px/1.5 Consolas;}
    body {font-size: 1rem;}
    form, form * {font: inherit;}
    fieldset {width: fit-content; height: auto; margin: 5px;}
    legend {font-size: 1.25rem;}
    input, output, textarea, button {display: inline-block; margin: 2.5px;}
    [for=send] {display: inline-block; margin-left: 10px;} 
    #send {vertical-align: middle;}
    .submit {margin-left: 190px;}
    [name=response] {display: block; width:430px; margin:5px}
    .col {display: table; font-size: 0; min-width: fit-content;}
    .col label {display: table-row; font-size: 1rem; line-height: 1;}
    label b {display: table-cell; color: blue; width: 50px;}
    label u, label mark {display: table-cell; color: red; min-width: 60px;}
  </style>
</head>

<body>

  <form id='main' action='https://httpbin.org/post' method='post' target='response'>

    <fieldset class='set'>
      <legend>Set 1</legend>
      <input id='i0' name='i0'>
      <input id='i1' name='i1'><br>
      <input id='i2' name='i2'>
      <input id='i3' name='i3'><br>
      <textarea id='t0' name='t0' rows='2' cols='42'></textarea>
    </fieldset>

    <fieldset class='set'>
      <legend>Set 2</legend>
      <input id='i4' name='i4'>
      <input id='i5' name='i5'><br>
      <input id='i6' name='i6'>
      <input id='i7' name='i7'><br>
      <textarea id='t1' name='t1' rows='2' cols='42'></textarea>
    </fieldset>

    <label for='send'>Send Data </label>
    <input id='send' type='checkbox' value=false>
    <button type='submit' class='submit'>Send</button>
    <button type='reset' class='reset'>Clear</button>
    <iframe src='about:blank' name='response'></iframe>

    <fieldset class='col'>
      <output id='view' value=null></output>
    </fieldset>

  </form>

  <script>
const form = document.forms[0]; // e.currentTarget for submit/reset | DOM Object
const list = form.elements; // NodeList | NodeList
const key = "formData"; // keyName | String
const msg = list.view; // DOMText | DOM Object
const rsp = frames['response'].document.body // Expression in submit/reset | DOM Object   
function collectData(NodeList, keyName, DOMText) {
  const dataArray = Array.from(NodeList).map((tag, index) => {
    let item = {};
    item.id = tag.id || tag.className;
    item.value = tag.value || false;
    return item;
  });
  return saveData(dataArray, keyName, DOMText);
};

function saveData(dataArray, keyName, DOMText) {
  localStorage.setItem(keyName, JSON.stringify(dataArray));
  return viewData(dataArray, DOMText);
};

function getData(keyName) {
  const dataArray = JSON.parse(localStorage.getItem(keyName));
  if (!dataArray) {
    DOMText.innerHTML = `There is no data stored under the key name ${key}.`;
  } else {
    return dataArray;
  }
  return false;
};

function viewData(dataArray, DOMText) {
  DOMText.innerHTML = " ";
  dataArray.forEach((item, index) => {
    Object.keys(item).forEach((property, count) => {
      let subLine;
      index = index > 9 ? index : "0" + index;
      if (count === 0) {
        subLine = `<label><b>${index}&boxV;${property}:</b><u>${item[property]}</u></label>`
      } else if (count === 1 && index === dataArray.length - 1) {
        subLine = `<label><b>${property}:</b><u>N/A</u></label>`;
      } else if (count === 1 && !item[property]) {
        subLine = `<label><b>${property}:</b><u>${item[property]}</u></label><hr>`;
      } else if (count === 1 && item[property]) {
        subLine = `<label><b>${property}:</b><u><mark>${item[property]}</mark></u></label><hr>`;
      } else {
        subLine = `<label><u>ERROR</u></label>`;
      }
      return DOMText.insertAdjacentHTML('beforeend', subLine);
    });
  });
  return false;
};

function setData(dataArray, NodeList, DOMText) {
  const DOMArray = Array.from(NodeList);
  dataArray.forEach((item, index) => {
    Object.values(item).forEach((value, count) => {
      const tag = DOMArray[index];
      if (count === 1 && value) {
        tag.value = value;
      } else {
        tag.value = "";
      }
    });
  });
  return viewData(dataArray, DOMText);
};
document.addEventListener('DOMContentLoaded', (e) => {
  const data = getData(key);
  setData(data, list, msg);
});
form.addEventListener('submit', (e) => {
  const sending = list.send.checked;
  if (!sending) {
    e.preventDefault();
    rsp.innerHTML = `As requested, data was not sent.`;
  }
  collectData(list, key, msg);
});
form.addEventListener('reset', (e) => {
  rsp.innerHTML = `All saved data has been deleted.`;
  msg.innerHTML = " ";
  localStorage.removeItem(key);
});
  </script>
</body>

</html>