如何整理来自用户的输入并将其存储在本地存储中

Question

我一直在尝试将用户输入的数组存储到 localstorage 中，而 output 并没有真正令人鼓舞，因为它给出了不适当的结果：

<form action="index.php">
    <input type="text" value=" " class="ex" >
    <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);
});

所以，我正面临的问题是，每当我点击按钮时，警报总是会响应，但是 localStorage 文件总是给出与空数组 [] 相同的值，而不管我在文本容器中输入的任何值。 forEach 也返回一个错误

无法读取空的 null ('forEach') 的属性

Answer 1

第一次运行脚本时，没有任何内容保存到本地存储中，所以

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

将items3设置为null 。 这需要进行错误检查以创建默认值。

提交侦听器需要在将新项目推送到数组后保存到本地存储。

无需在侦听器中调用localStorage.getItem() 。 您可以只使用一开始从本地存储读取时设置的全局items3变量。

 const items2 = document.querySelector('form'); items2.addEventListener('submit', function(ev) { 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=" " class="ex" > <button id="ex">add item </button> </form>