Как мне создать новый контейнер объектов при клике?

Question

- с чистым JS ---

Я пытаюсь сохранить пользовательский ввод в хранилище браузера. Мой код помещает ввод в строковый массив. Однако после очистки страницы и регистрации нового ввода обновляются только предварительно сохраненные данные, а не создается новый контейнер объектов для них. Как я могу сохранить новый вход в новый объект внутри массива вместо того, чтобы перезаписывать старые?

function saveData() {
  var data = document.querySelectorAll("input");
  var formData = [];

  console.log('data', data);

  for (let i = 0; i < data.length; i++) {
    formData.push({
      name: data[i].name,
      value: data[i].value,
      type: data[i].type,
      checked: data[i].checked
    })
  }
  localStorage.setItem('formData', JSON.stringify(formData));
  let output = localStorage.getItem('formData');
  console.log("formData for localStorage", formData)
  console.log('output', JSON.parse(output));
  document.getElementByTagName('input').reset();
}

Answer 1

Для хранения нового объекта либо вам нужно иметь новое значение key для нового объекта, либо вы можете создать массив объектов в локальном хранилище

function saveData() {
  let data = document.querySelectorAll("input");
  let formData = [];
  let storageData = [];

  console.log('data', data);

  for (let i = 0; i < data.length; i++) {
    formData.push({
      name: data[i].name,
      value: data[i].value,
      type: data[i].type,
      checked: data[i].checked
    })

  }
  if (localStorage.getItem("formData") != null)
    { storageData.push(JSON.Parse( localStorage.getItem('formData')));}
  storageData.push(formData);
  localStorage.setItem('formData', JSON.stringify(storageData));

  let output = localStorage.getItem('formData');
  console.log("formData for localStorage", formData)
  console.log('output', JSON.parse(output));
  document.getElementByTagName('input').reset();
}