@elo-dev

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

Здравствуйте, у меня есть элемент 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();
})
  • Вопрос задан
  • 184 просмотра
Пригласить эксперта
Ответы на вопрос 2
@Azperin
Дилетант
Попробуй изменить так let htmlCard = localStorage.getItem('card') || '';
Ответ написан
@rPman
У тебя save_element(); вызывается прямо в рендере перед валидацией полей и чтением этих полей из стораджа, логично что там пусто.

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Artezio Нижний Новгород
от 130 000 до 180 000 ₽
Artezio Москва
от 160 000 до 220 000 ₽
Artezio Витебск
от 2 800 до 3 300 $