Как сохранить отрисованный html при перезагрузке с помощью localStorage?

Question

[Andy Koshman]

Всем привет, направьте пожалуйста как при клике на addCar ("Добавить транспорт") сохранить добавленную разметку html на странице при перезагрузке?

https://jsfiddle.net/zoh9vw8c/5/

<form class="form__passengers-car">
  <div class="car-item">
    <input type="text" class="form__car-type" placeholder="Введите тип">
    <div></div>
    <input type="text" class="form__car-model" placeholder="Введите модель">
    <div></div>
    <button class="primary-btn" type="submit">Применить</button>
  </div>
</form>
<button class="form__car-add">Добавить транспорт</button>

let formPassengersCar = document.querySelector(".form__passengers-car");
let currentCars = JSON.parse(localStorage.getItem("Cars") || "[]");
let passCar = document.querySelector(".form__passengers-car");
let addCar = document.querySelector(".form__car-add");

addCar.addEventListener("click", function() {
  let carItemClone = document.querySelector(".car-item");
  /*   const renderFormCar = (currentCars) => { */
  let passCarClone = document.createElement('div');
  passCarClone.classList.add('car-item')
  passCarClone.innerHTML = `
       <span class="remove">X<span>
       <input type="text" class="form__car-type" placeholder="Введите тип">
       <input type="text" class="form__car-model" placeholder="Введите Марка и Модель тр. ср-ва" value="">
       <div></div>
         <button class="primary-btn" type="submit">Применить</button>`

  passCar.append(passCarClone);
  /*   }
    renderFormCar() */

  let remove = document.querySelector('.remove')
  passCar.addEventListener('click', function(e) {
    if (e.target.classList.contains("remove")) {
      e.target.parentNode.remove()
    }
  })
});


formPassengersCar.addEventListener("click", function(e) {
  e.preventDefault();
  const parentBlock = e.target.closest(".car-item");
  if (e.target.classList.contains("primary-btn")) {

    let selectCarModel = parentBlock.querySelector(".form__car-model").value,
      selectCarType = parentBlock.querySelector(".form__car-type").value;

    let dataCars = {
      CarType: selectCarType,
      Model: selectCarModel,
    };
    let updateState = () => {
      currentCars.push(dataCars);
      localStorage.setItem("Cars", JSON.stringify(currentCars));
    }
    updateState()
  }
});

Comments

[symnoob]

А нужно сохранять? Можно ведь и теговать атрибутом то что добавили. Уже при добавление прописать. Или я не понял вапроса?

Answer 1

[Олег Колесников]

можно сделать так, берём данные из LocalStorage и отрисовываем html, сильно смысла нету в данном случае хранить одинаковый html

if (currentCars.length > 0) {
  for (let car of currentCars) {
    renderFormCar(car);
  }
}

function renderFormCar (currentCar) {
  let type = currentCar?.CarType || "";
  let model = currentCar?.Model || "";
  let passCarClone = document.createElement("div");
  passCarClone.classList.add("car-item");
  passCarClone.innerHTML = `
       <span class="remove">X<span>
       <input type="text" class="form__car-type" placeholder="Введите тип" value="${type}">
       <input type="text" class="form__car-model" placeholder="Введите Марка и Модель тр. ср-ва" value="${model}">
       <div></div>
        <button class="primary-btn" type="submit">Применить</button>`;
  passCar.append(passCarClone);
};

addCar.addEventListener("click", function () {
  renderFormCar();
  passCar.addEventListener("click", function (e) {
    if (e.target.classList.contains("remove")) {
      e.target.parentNode.remove();
    }
  });
});