Как добавить элементы в localStorage?

Question

[elo-dev]

Здравствуйте, вопрос такой, есть функция, которая создает и добавляет "карточку" на страницу, вопрос в том как сохранять все добавленные карточки в localStorage ?

const addVideo = document.querySelector('.btn-success-form');

addVideo.addEventListener('click', function(event){
  event.preventDefault();
  var nameVideo = document.querySelector('.nameVideo');

  var input = document.querySelector('#imageVideo');
  var error = document.querySelector('.error');
  var success = document.querySelector('.success');
  var curFile = input.files;

  var btnGenere = document.querySelector('.btn-genere');

  if(!nameVideo.value){
    nameVideo.style.border = "2px solid red";
    var errName = document.createElement('p');
    errName.textContent = 'Название не выбрано';
    error.appendChild(errName);
  }
  if(!checkbox){
    var errRate = document.createElement('p');
    errRate.textContent = 'Рейтинг не указан';
    error.appendChild(errRate);
  }
  if(!genere){
    btnGenere.style.border = "2px solid red";
    var errGenere = document.createElement('p');
    errGenere.textContent = 'Жанр не выбран';
    error.appendChild(errGenere);
  }
  if(curFile.length == 0){
    var errFile = document.createElement('p');
    errFile.textContent = 'Файл для загрузки не выбран';
    error.appendChild(errFile);
  }

  var blockSerials = document.querySelector('#serials');
  var blockFilms = document.querySelector('#films');

  var videoCard = `
      <div class="col mb-4">
        <div class="card">
          <img src="${url}" class="card-img-top" alt="...">
          <div class="card-body">
            <h5 class="card-title">${nameVideo.value}</h5>
            <div class="wrapper__footer-card">
              <span class="fa fa-star rating-star"></span>
              <span class="card-rate">${checkbox}</span>
              <span class="card-genere">${genere}</span>
              <span class="card-sort">${sortCheck}</span>
            </div>
          </div>
        </div>
      </div>
      `;

  var resetCheckboxInput = document.querySelectorAll('[name="rating"]');

  resetCheckboxInput.forEach(e =>{
    e.checked = false;
  })  
  
  if(typeof url !== 'undefined' && sortCheckAttr == 'films' && nameVideo.value && checkbox && genere && curFile.length > 0){
    blockFilms.insertAdjacentHTML('beforeend', videoCard);
    nameVideo.value = '';
    genere = '';
    blockNameGenere.textContent = '';
    var successBlock = document.createElement('p');
    successBlock.textContent = 'Карточка добавлена';
    success.appendChild(successBlock);
  } else if(typeof url !== 'undefined' && sortCheckAttr == 'serials' && nameVideo.value && checkbox && genere && curFile.length > 0){
    blockSerials.insertAdjacentHTML('beforeend', videoCard);
    nameVideo.value = '';
    genere = '';
    blockNameGenere.textContent = '';
    var successBlock = document.createElement('p');
    successBlock.textContent = 'Карточка добавлена';
    success.appendChild(successBlock);
  }
})

Answer 1

[dollar]

const data = { ..... }; // не должно быть функций и прочих непотребств
localStorage.card_data = JSON.stringify(data);

Потом:

if (localStorage.card_data) {
  restore_data = JSON.parse(localStorage.card_data);
}

Answer 2

[dicem]

const data = { ... } // данные карточки
localStorage.setItem('card_data', JSON.stringify(data)) // само собой, вместо card_data пишешь что угодно

Comments

[Сергей delphinpro]

В localStorage хранятся только строки.

[dicem]

Сергей delphinpro, ну так JSON.stringify в помощь

[Сергей delphinpro]

dicem, я-то знаю, но вы же не мне отвечали на вопрос.