Почему при перезагрузке страницы, данные пропадаю, хотя сохранены в localStorage?

Question

[elo-dev]

Здравствуйте, у меня есть элемент DOM дерева, я пытаюсь его сохранить в localStorage, вроде как он туда попадает, но при перезагрузке страницы, на странице данные пропадают. Как это исправить ?

const addVideo = document.querySelector('.btn-success-form');
// Счетчик ID добавление в массив
let id = 0;

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 resetCheckboxInput = document.querySelectorAll('[name="rating"]');

  // Сброс input Checkbox
  resetCheckboxInput.forEach(e =>{
    e.checked = false;
  })  

  // Создание Массива из объектов  
  const card = [];
    if(document.onclick = addVideo){
    id++;
    card.push({
          "id" : id,
          "img" : url,
          "title" : nameVideo.value,
          "genere" : genere,
          "rate" : checkbox,
          "sort" : sortCheck
    });
  }

  // Создание Класса , который рендерит карточку и отображает карточку на странице
  class Card {

    render(){
      const cardStore = localStorageCard.getCard();
      let htmlCard = '';
      card.forEach(({id, img, title, genere, rate, sort}) => {

        htmlCard += `
          <div class="col mb-4">
          <div class="card">
            <img src="${img}" class="card-img-top" alt="...">
            <div class="card-body">
              <h5 class="card-title">${title}</h5>
              <div class="wrapper__footer-card">
                <span class="fa fa-star rating-star"></span>
                <span class="card-rate">${rate}</span>
                <span class="card-genere">${genere}</span>
                <span class="card-sort">${sort}</span>
              </div>
            </div>
            <div class="card__delete">
              <i class="fa fa-trash" aria-hidden="true"></i>
            </div>
          </div>
        </div>
        `;
      });
      save_element();
      function save_element(){
        let parent = htmlCard;
        localStorage.setItem('card', parent);
      }
      // Валидация полей
      if(typeof url !== 'undefined' && sortCheckAttr == 'films' && nameVideo.value && checkbox && genere && curFile.length > 0){
        blockFilms.insertAdjacentHTML('beforeend', localStorage.getItem('card'));
        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', localStorage.getItem('card'));
        nameVideo.value = '';
        genere = '';
        blockNameGenere.textContent = '';
        var successBlock = document.createElement('p');
        successBlock.textContent = 'Карточка добавлена';
        success.appendChild(successBlock);
      }
    }
  }

  // Создание экземпляра 
  const cardPage = new Card();
  // Вызов функции render() экземпляра
  cardPage.render();
})

Answer 1

[Алексей]

Попробуй изменить так let htmlCard = localStorage.getItem('card') || '';

Answer 2

[rPman]

У тебя save_element(); вызывается прямо в рендере перед валидацией полей и чтением этих полей из стораджа, логично что там пусто.

Сохранять нужно после ввода даных

Comments

[elo-dev]

Если ты имел ввиду сохранять после валидации, то уже пробовал, ничего не меняется. В сам localStorage данные сохраняются, и при перезагрузке остаются там, но со страницы данные пропадают

[rPman]

выводи в консоль перед save что именно ты туда сохраняешь, поймешь
console.log(htmlCard)