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

Question

[Genri_Rus]

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

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

<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

Comments

[dollar]

Оптимизировать - как угодно.
А в чем, собственно, проблема? У вас что-то не работает или что?

[Genri_Rus]

dollar, ну мне нужно сделать так, чтобы вывод html кода параграфов происходил только в том случае, если активирован чекбокс и записан в localStorage

В данном случае чекбоксы записываются в localStorage

А как им присвоить вывод html кода я не знаю (

https://codepen.io/Genri_Rus/pen/PgKago

[Genri_Rus]

dollar, я так понял, что вы не знаете как или может есть примеры ?