how to collate an input from the users and store it localstorage-CodePudding

I've been trying to store an array from the the users input into localstorage and the output is not really encouraging as it gives inappropriate result:

<form action="index.php">
    <input type="text" value=" "  >
    <button id="ex">add item </button>
</form>

const items2 = document.querySelector('form');
items2.addEventListener('submit', function(ev) {
  const items1 = document.getElementsByClassName('ex').value;
  let items3;
  if (localStorage.getItem('items3') === null) {
    items3 = [];
  } else {
    items3 = JSON.parse(localStorage.getItem('items3'));
  }
  localStorage.setItem('items3', JSON.stringify(items3));
  items3.push(items1);

  alert('submit');
  ev.preventDefault();
});

const items3 = JSON.parse(localStorage.getItem('items3'));
items3.forEach(function(items1) {
  console.log(items1);
});

so, the problem I am facing exactly is that the alert always respond each time I click on the button which is but the localStorage file keeps giving the same value as an empty array [] regardless of any value I input into the text container. The forEach is also returning an error of

cannot read properties of an empty of null ('forEach')

CodePudding user response：

The first time you run the script, nothing has been saved to local storage, so

const items3 = JSON.parse(localStorage.getItem('items3'));

will set items3 to null. That needs to have error checking to create a default value.

The submit listener needs to save to local storage after pushing the new item into the array.

There's no need to call localStorage.getItem() in the listener. You can just use the global items3 variable that's set when you read from local storage at the beginning.

const items2 = document.querySelector('form');
items2.addEventListener('submit', function(ev) {
  const items1 = document.getElementsByClassName('ex').value;
  items3.push(items1);
  localStorage.setItem('items3', JSON.stringify(items3));

  alert('submit');
  ev.preventDefault();
});

const items3 = JSON.parse(localStorage.getItem('items3') || '[]');
items3.forEach(function(items1) {
  console.log(items1);
});

<form action="index.php">
    <input type="text" value=" "  >
    <button id="ex">add item </button>
</form>

CodePudding user response：

Here's a fix for you.

<form>
  <input name="firstName" type="text" id="firstName"  />
  <button id="ex">add items</button>
</form>

const items2 = document.querySelector("form");
items2.addEventListener("submit", function (ev) {
  ev.preventDefault();
  let items1 = document.getElementById("firstName").value;
  items3.push(items1);
  localStorage.setItem("items3", JSON.stringify(items3));
  document.getElementById("firstName").value = "";
  alert("name added successfully")
});

const items3 = JSON.parse(localStorage.getItem("items3") || "[]");
items3.forEach(function (items1) {
  console.log(items1);
});