Как сохранить данные в localStorage?

Question

[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>';

    if ($(this).prop('checked')) {
        modal.addClass('modal-show');
        modal.append(wrapReplace);
    } else {
        modal.html(modal.html().replace(wrapReplace, ''));
    }
});

Данный вариант работает без localStorage, т.е. после перезагрузки страницы все удаляется

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

Answer 1

[Сергей]

https://github.com/justedoit/task-list/blob/master...

вот пример

Comments

[Genri_Rus]

Я так понял, что это у вас типа список задач, аналог to do list ?

Я сделал вот так, но как сделать так, чтобы по id вытаскивать html код ?

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

Т.е. сейчас у меня все чекбоксы хранятся в localStorage, а как выводить теги параграфов в модальное окно ?

[Genri_Rus]

Мне нужно сначала обратиться к элементу, а потом поместить его в объект ?

Далее проверять, если checked в localStorage, то выводить ?

P.S. Я просто сам принцип работы с чекбоксами не могу понять (