@Genri_Rus

Как оптимизировать код для localStorage?

Добрый день ...

Вот пример кода:

<div>
  <p><input class="check" id="check-option-1" name="name" type="checkbox">
  <label for="check-option-1"></label>
  </p>
  <p class="copy">1
    <a href="#" title="TITLE + добавляет всплывающую подсказку к тексту ссылки">Ссылка</a>
  </p>
  <p class="copy-2">1.1</p>
</div>
<div>
  <p><input class="check" id="check-option-2" name="name" type="checkbox">
  <label for="check-option-2"></label>
  </p>
  <p class="copy">2</p>
  <p class="copy-2">2.1</p>
</div>
<div>
  <p><input class="check" id="check-option-3" name="name" type="checkbox">
  <label for="check-option-3"></label>
  </p>
  <p class="copy">3</p>
  <p class="copy-2">3.1</p>
</div>
<div>
  <p><input class="check" id="check-option-4" name="name" type="checkbox">
  <label for="check-option-4"></label>
  </p>
  <p class="copy">4</p>
  <p class="copy-2">4.1</p>
</div>

<div class="modal"></div>


$('body').on('change', '.check', function(){
    var replace = '';
    var elements = $(this).parent().siblings('.copy, .copy-2');
    var modal = $('.modal');

    $(elements).each(function() {
      replace += this.outerHTML.replace(/(<|<\/)p/g, '$1span');
    });

    if ($('input').is(':checked')) {
        if (!modal.children().is('.item')) modal.html('');
    } else {
        modal.removeClass('modal-show').text('Здесь ничего нет');
    }

    var wrapReplace = '<div class="item">' + replace + '</div>';
    actChecked($(this).attr('id'));
});

actChecked('ready');

function actChecked(id) {
  const checkedName = 'checked';
  let current = localStorage.getItem(checkedName);

  if (id === 'ready') {
    if (current !== null) {
      JSON.parse(current).forEach(v => {
        $('#' + v).prop('checked', true);
      });
    }
    return;
  }

  if (current === null) {
    return localStorage.setItem(checkedName, JSON.stringify([id]));
  }

  let arrCurrent = JSON.parse(current);
  const iof = arrCurrent.indexOf(id);

  if (iof !== -1) {
    arrCurrent.splice(iof, 1);
    return (arrCurrent.length === 0) ? localStorage.removeItem(checkedName) : localStorage.setItem(checkedName, JSON.stringify(arrCurrent));
  } else {
    arrCurrent.push(id);
    return localStorage.setItem(checkedName, JSON.stringify(arrCurrent));
  }
}


В localStorage записываются id чекбоксов, а вот как вывести потом html верстку в модальное окно с классом modal ?

Весь html код хранится в переменной wrapReplace
  • Вопрос задан
  • 113 просмотров
Пригласить эксперта
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы