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

Роман,
1. нужна одна картинка
2. в будущем хотелось бы, но пока некритично

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

Роман, а почему тогда вот так работает:

let img = $('img').attr('src');

В этом случае я могу узнать только путь к одной картинке, а через this не работает

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

Stalker_RED, а зачем тогда вы советуете заведомо неправильный ответ ?

Ведь в вашем примере вы не через localStorage удаляли id чекбоксов, а:

document.addEventListener('change', evt => {
    if (evt.target.matches(checkboxSelector)) {
      if (evt.target.checked) {
        addToList(evt.target)
      } else {
        delete list[evt.target.id]
      }
      updateModal(list)
      saveChanges(list)
    }
  })

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

Роман, ну вот пример:

<div>
  <p><input class="check" id="check-option-1" name="name" type="checkbox">
  <label for="check-option-1"></label>
  </p>
  <img src="http://lorempixel.com/30/30/city">
  <p class="copy">1</p>
  <p class="copy-2">1.1</p>
</div>

Почему у меня так не хочет работать ?

$('body').on('change', '.check', function(){
     
    let id = $(this).attr('id'); - это работает 
    let img = $(this).attr('src'); - а вот это пишет undefined
});

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

Роман, короче опять что-то не понимаю

Вот: let img = $('img').attr('src');

В этом случае я могу узнать только путь к одной картинке, а через this не работает

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

Stalker_RED, там ничего не сказано про метод filter

А еще у меня массив и нужно удалять не целиком localStorage )

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

DanKud, всеобщими усилиями я смог сделать полноценный пример: https://codepen.io/Genri_Rus/pen/gyKjRR

P.S. Возможно вы прочитаете данное сообщение и напишите общие замечания ;)

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

Роман, смотрите, мой вариант тоже работает

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

Кое-что взял с вашего варианта, но вроде тоже все работает ^D

P.S. Правда оптимизация хромает ...

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

Роман, забыл функцию добавить, теперь в модальном окне отрисовывается )

Вот мой пример: https://codepen.io/Genri_Rus/pen/gyKjRR

Правда я брал отсюда некоторые задумки: https://codepen.io/Fullzero/pen/QMNbBm

- спасибо, добра и всего самого наилучшего !

P.S. Но Ваш пример все равно круче, более гибкий что ле !

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

Роман, а в этом варианте почему у меня не сохраняется в модальном окне после перезагрузки ?

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

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

Роман, а разве так работать не будет ?

let output = "";
for (let i in cart) {
        output += '<div class="item">';
        output += '<p class="copy">' + cart[i].p[i] + '</p>';
        output += '<p class="copy-2">' + cart[i].p[i] + '</p>';
        output += '</div>';
      }
$(".modal").html(output);

Вместо ?

let html = "";
  list.forEach(item=>{
    html += '<div class="item">';
    html += item.p.map(text=>{
      return '<p class="">'+text+'</p>'; // хз какой класс, ведь по вашей просьбе мы его нигде не сохранили
    }).join(' ');
    html += '</div>';
  });

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

Роман, вы просто профи )

Спасибо вам за все и всего хорошего Вам и вашим близким !

P.S. А мой вариант наверно вообще отстой ^D : https://codepen.io/Genri_Rus/pen/gyKjRR ?

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

Роман, а так не получится ?

let output = "";
for (let i in cart) {
        output += '<div class="item">';
        output += '<p class="copy">' + cart[i].p[i] + '</p>';
        output += '<p class="copy-2">' + cart[i].p[i] + '</p>';
        output += '</div>';
      }
$(".modal").html(output);

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

Роман, мне нужно в будущем просто хранить путь к ссылке и картинки

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

Вот ваш пример: https://jsfiddle.net/kbq4e653/53/?utm_source=websi...

Возможно ли сделать именно такой вариант ?

Типа:

0: {id: "check-option-1", p: ["1", "1.1"]}
id: "check-option-1"
p: ["1", "1.1"]
0: "1"
1: "1.1"
link: 'путь к ссылке'
img: 'путь к картинке'
1: {id: "check-option-2", p: ["2", "2.1"]}
id: "check-option-2"
p: ["2", "2.1"]
0: "2"
1: "2.1"
link: 'путь к ссылке'
img: 'путь к картинке'

А в чем проблема?

Да это я просто понял, что можно хранить все параграфы, не указывая конкретные классы к ним

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

Роман, я должен вместо этой записи:

cart.add(id, {
      id: id,
      p: $(this).parent().siblings('.copy, .copy-2').text()
    });

Сделать вот так ?

cart.add(id, {
      id: id,
      p: $(this).parent().nextAll('p').text()
    });

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

Роман, ваш вариант круче )

P.S. Логика очень грамотная !

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

Роман, сейчас только что проверил, у вас четко работает )

Как в данном случае сделать вот так ?

Первая галочка, соответственно в модальном окне вот это:

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

Вторая галочка, соответственно в модальном окне вот это:

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

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

Роман, возможно одинаковые имена в localStorage

У меня в моем примере вроде бы точно также называется

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

Роман,

В любом случае для обоих вариантов мне надо понять, что же вы хотите в конечном варианте видеть в модальном окне. Если вас не затруднит, дайте как образец - готовый html, который будет в modal.innerHTML если отметить обе галки в примере

С возвращением и спасибо, что не забыли про меня :)

Я так понял в вашем примере вы сделали небольшое ООП ?

Вот в этом примере я сделал вывод:

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

Но он чет как-то неправильно выводит, мне нужно в модальном окне что-то типа такого:

Первая галочка, соответственно в модальном окне вот это:

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

Вторая галочка, соответственно в модальном окне вот это:

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

Помните вы спрашивали про id 0, 1

а вот эти 0: ... 1: ... откуда берутся?

Так вот, я понял что вы имели ввиду и мне нужно сохранение, как в этом примере:

https://jsfiddle.net/kbq4e653/50/?utm_source=websi...

Т.е. по такому правилу:

0: {id: "check-option-1", p: ["1", "1.1"]}
id: "check-option-1"
p: ["1", "1.1"]
0: "1"
1: "1.1"

1: {id: "check-option-2", p: ["2", "2.1"]}
id: "check-option-2"
p: ["2", "2.1"]
0: "2"
1: "2.1"

Как вывести checked, если id чекбоксов сохранены в localStotage?

Владимир Проскурин, смотрите, я сделал вывод:

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

Но почему-то после перезарузки страницы ничего не сохраняется в модальном окне