Как добавить произвольные ключи в объект localStorage?

Роман, этот вариант просто нужно доработать

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

Сейчас моя главная проблема - это сделать так, чтобы при нажатии на чекбоксы, id в localStorage присваивать checked

И соответственно сохранять checked после перезагрузки страницы, если в localStorage есть эти id

Пытался так, но почему-то ничего не работает:

for (var i in cart) {
          if (cart[i].id === id) {
            $('#' + id).prop('checked', true);
            saveCart();
            return;
          }

Как добавить дополнительные объекты в localStorage?

Stalker_RED, ну вот смотрите
Логика такая, если я поставил галочку чекбоксу, то только в этом случае данные сохраняются в localStorage

В localStorage у меня сохраняется: id чекбоксов и текст параграфов

Т.к. я поставил галочку, то делал проверку:

for (var i in cart) {
					if (cart[i].id === id) {
            $('#' + id).prop('checked', true);
						saveCart();
						return;
					}

Т.е. если id равен id в массиве cart, то присваивать всем отмеченным чекбоксам checked

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

Но у меня почему-то не отмечаются галочки после перезагрузки, которые я ранее отмечал

Как добавить дополнительные объекты в localStorage?

Stalker_RED, у меня jquery

Как понять localStorage, что у меня чекбокс отмечен галочкой ?

В данном примере: https://codepen.io/Genri_Rus/pen/gyKjRR

Как добавить дополнительные объекты в localStorage?

Stalker_RED, добрый вечер, мне вот так нужно )

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

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

Как заменить теги при использовании clone()?

DanKud, у меня практически получилось )

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

Такой вариант вообще с точки зрения логики правильный ?

Как добавить произвольные ключи в объект localStorage?

Роман, хорошо )
P.S. Еще раз благодарен !

Как добавить произвольные ключи в объект localStorage?

Роман, добрый вечер )

Сейчас у меня не получается сделать чекбоксы checked, если я по ним нажимал, а также удалять ключи при убирании галочек

Вот так попытался, но галочки не хотят сохраняться (

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

Как заменить теги при использовании clone()?

DanKud, вот я сделал сам, а как теперь сохранять галочки, если я нажимал на них ?

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

Как добавить произвольные ключи в объект localStorage?

Роман, таки намучился )

Заработало: https://codepen.io/Genri_Rus/pen/gyKjRR

Только теперь понять, как удалять из localStorage при убирании чекбоксов

Как добавить произвольные ключи в объект localStorage?

Роман, мне нужно, чтобы id чекбоксов и параграфов записывалось в localStorage, а потом выводилось в модальном окне через цикл for in

Т.е. в модальном окне через javascript подставлялась html верстка и записанные объекты из localStorage, а потом уже выводились все значения
Но параграфы хранились в localStorage в виде текста (без тегов)

А также, чтобы чекбоксы запоминались в localStorage, если я нажимал на них

Как добавить произвольные ключи в объект localStorage?

Роман, а это минусы localStorage или из-за косяков в коде ?

Как добавить произвольные ключи в объект 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</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 class="preview"><i class="fa fa-share" aria-hidden="true"></i></div>
<div class="modal">Здесь ничего нет</div>

$('body').on('change', '.check', function(){
    let modal = $('.modal');

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

     let id = $(this).attr('id');
     let p  = $(this).parent().siblings('.copy, .copy-2');
     
     Item(id, p);
});

Тут вроде все работает, а вот с localStorage опять таки проблемы, но я все равно Вам очень благодарен !

Как добавить произвольные ключи в объект localStorage?

Роман, спасибо большое )

У меня просто на jquery уже были написаны некоторые функции, в частности добавления по клику на чекбокс и удалении из модального окна при убирании галочки у чекбокса

Т.е. у меня все параграфы заносились во wrapper с классом item и должны были выводиться в модальном окне

Типа так:

<div class="item">
<p class="copy">1</p>
<p class="copy-2">1.1</p>
</div>

А потом у меня работала такая функция по удалению и скрытию модального окна:

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

На нативном javascript'e это также можно реализовать, но я пока что хотел на данном примере для лучшего понимания (

А с пониманием localSrorsge у меня есть некоторые проблемы, вроде бы по логике понимаю как, а вот на практике начинаются какие-то ошибки ...

P.S. Еще раз благодарен за объяснения ! :)

Как заменить теги при использовании clone()?

DanKud, я сделал пример, так правильно ?

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

Как добавить произвольные ключи в объект localStorage?

Роман, брал пример отсюда: https://codepen.io/Fullzero/pen/QMNbBm

Мне просто пока что тяжело ориентироваться в нативном javascript'е

Вот код:

let cart = [];

      function Item(id, p) {
        this.id = id;
        this.p = p;
        console.log(this.p = p);
      }

      function saveCart() {
        localStorage.setItem("shoppingCart", JSON.stringify(cart));
      }

      function loadCart() {
        cart = JSON.parse(localStorage.getItem("shoppingCart"));
        if (cart === null) {
          cart = []
        } else {
          let item = cart.push();
          saveCart(item);
        }
      }

      loadCart();

    $('body').on('change', '.check', function(){
    let modal = $('.modal');

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

     let id = $(this).attr('id');
     let p  = $(this).parent().siblings('.copy, .copy-2');
     
     Item(id, p);
});

Я создал переменные id и p, потом я передаю в функцию Item

А также зачем вы создаете класс Item, так конечно можно, ео в чем смысл?

Ну я сгруппировал объект, где-то опять ошибаюсь:

function Item(id, p) {
        this.id = id;
        this.p = p;
}

Или как сделать проще, чтобы сразу сформировать объект ?

Как добавить произвольные ключи в объект localStorage?

Роман, а вот насчет данного примера: https://codepen.io/Genri_Rus/pen/gyKjRR

У меня в функции Item хранятся объекты, они получается должны уже записываться в localStorage ?

Как добавить произвольные ключи в объект localStorage?

Роман, ок )

Спасибо Вам, что на toster есть такие отзывчивые люди как вы !

Как добавить произвольные ключи в объект localStorage?

Роман, я вот попытался сделать более упрощенный вариант, но почему-то ничего не сохраняется:

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

Как добавить произвольные ключи в объект localStorage?

Роман, мне нужно типа так:

0: {
 id: check-option-1,
 image: 'тут хранить путь к картинке - [src="тут какая-та картинка"]',
 text: 1 1.1
 link: 'тут хранить атрибут ссылки - [href="тут какая-та ссылка"]'
},
,,,
и т.д.

А далее можно выводить через цикл и подставлять html в javascript ?

Типа вот так:

function updateModal(list) {
    for let key in obj {
   
}

Как заменить теги при использовании clone()?

DanKud, не покажите пример как нужно, я код выше скинул примера ?