如何整理來自用戶的輸入並將其存儲在本地存儲中

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>