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

Question

[Genri_Rus]

Всем здравствуйте !

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

<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>

(function(){
  let checkboxSelector = 'input.check',
      groupWrapperSelector = 'div',
      dataSelectors = ['.copy', '.copy-2'],
      localStorageKey = 'savedItems',
      modal = document.querySelector('.modal'),
      list = JSON.parse(localStorage.getItem(localStorageKey)) || {}

  if (Object.keys(list).length) {
    for (let key in list) {
      document.getElementById(key).checked = true
      modal.innerHTML += list[key]
    }
  }

  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)
    }
  })

  function addToList(elem) {
    list[elem.id] = ''
    let wrapper = elem.closest(groupWrapperSelector)
    dataSelectors.forEach(selector => {
	  
      list[elem.id] += wrapper.querySelector(selector).innerText
    })
  }

  function updateModal() {
    modal.innerHTML = Object.values(list).join('')
  }

  function saveChanges(list) {
    localStorage.setItem(localStorageKey, JSON.stringify(list))
  }
})()

Нужно в localStorage хранить не только значения, но и ключи

Примерно вот так:

0: {
 id: id,
 p: текст параграфа
},

В localStorage сейчас вот так:

check-option-1: "11.1"
check-option-2: "22.1"

P.S. В данном варианте у меня в модальном окне выводится только текст, а как сделать, чтобы выводилось с тегами p ?

Comments

[Rsa97]

Пакуйте в JSON.
localStorage хранит только строки.

[Genri_Rus]

Rsa97, мне нужно просто добавить ключи к объекту, json выводит объект

Вот примерно так: https://codepen.io/antonietta/pen/MVedpj

[Genri_Rus]

Rsa97, у меня есть цикл, как можно в цикле добавить ключи к объекту ?

Answer 1

[Роман]

Вы пишете:

Нужно в localStorage хранить не только значения, но и ключи
Примерно вот так:

0: {
 id: id,
 p: текст параграфа
},

при этом у вас:

<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>

объясние, откуда должен взяться id, из какого именно элемента p долже браться текст?

Comments

[Genri_Rus]

check-option'ы - id

А параграфы (текст) - copy, copy-2
Или так сделать невозможно ?

Допустим весь текст должен храниться в ключе, под названием p

[Роман]

Genri_Rus, почему не возможно, возможно :)



сохраняет для каждого id массив, элементами которого являются параметры всех дочерних элементов, лежащих в текущем контейнере (div) и имеющие указанные в dataSelectors селекторы

PS: сильно не ковырял, возможно даже не допонял вопрос.

[Genri_Rus]

Роман, спасибо за пример и разъяснения !

А вот как сделать именно так ?

Т.е. мне нужно исключительно в localStorage хранить только id чекбоксов и текст у параграфов ?

0: {
 id: id,
 p: текст параграфа
},
1: {
 id: id,
 p: текст параграфа
}
....
и.т.д

[napa3um]

Genri_Rus, произнесите слово "массив", пытаясь рассказать, ЧТО же вы хотите поместить в localStorage. Возможно, этого уже будет достаточно.

[Роман]

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

так не то?


И что делать с ситуацией когда параграфов несколько?

не могли бы вы написать json который должен получится в локалсторадже есть вы в вашем примере отметите все галочки.

[Роман]

Genri_Rus, вот еще один вариант, дальше сами думайте.

[Роман]

napa3um, я боюсь человек сам не до конца понимает что он хочет разместить в локалсторадж. Если массив, то прийдется писать функцию удаления элемента по его id. Проще сразу ассоциативный массив использовать. Так же не понятно что человек хочеть поместить в p (сумму текстов из элементов p, сумму классов элементов p, или p.outerHTML). Автор мало того что не может сформулировать вопрос, он уже 2 часа не может отписаться на эту просьбу (не могли бы вы написать json который должен получится в локалсторадже есть вы в вашем примере отметите все галочки.)

PS: ушел спать, завтра не вернусь(

[Genri_Rus]

Роман, заранее извиняюсь, я все прочитал )

Просто возможно у нас разные часовые полюса, поэтому я не успел Вам ответить, еще раз - извиняюсь заранее (

Может этот пример будет нагляднее ?

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

По данному примеру все Вы правильно показываете

Насчет параграфов, то я не знаю как поместить сразу в localStorage вот эти строчки:

В text должно быть: 1 1.1

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

В text должно быть: 2 2.1

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

Мне нужно в ключе p или как у вас: "text" хранить не отдельно, а сразу 2 значения (текста) в параграфах

Вот как в старом примере они хранились:

check-option-1: "1 1.1"
check-option-2: "2 2.1"

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

Только нужно вот так:

0: {
 id: check-option-1,
 text: 1 1.1
},
1: {
 id: check-option-2,
 text: 2 2.1
}

Возможно такой вариант можно сделать только с помощью массива (я просто не знаю, как это можно сделать более правильно) ?

[Роман]

Genri_Rus, последние примеры настолько запутаны, что нет никакого желания их разбирать.

накидал вот такой вариант, в коде есть множество комментариев, нажмите на
Edit in JSFiddle для удобства просмотра


PS: с примером есть сложность, индекс записи в массиве list зависит от порядка нажатия на чекбоксы. Так по идее быть не должно, но опираясь на ваши слова:

Только нужно вот так:

0: {
 id: check-option-1,
 text: 1 1.1
},
1: {
 id: check-option-2,
 text: 2 2.1
}

сделал list массивом. Непонятно только как вы при таком подходе собираетесь сопоставлять чекбоксы нужным индексам. я уже спрашивал вас о логике их выбора:

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

но вы проигнорировали вопрос, из чего я сделал вывод, что индексы не важны. поэтому в настоящем варианте данный вопрос я не решал.

[Genri_Rus]

Роман, заранее спасибо за ответ и оказанную помощь !

Я абстрагировался изначально от данного примера:

https://codepen.io/antonietta/pen/MVedpj

Мне просто нужен похожий пример, но только на чекбоксах

Искал примеры,- но так и не нашел (

сделал list массивом. Непонятно только как вы при таком подходе собираетесь сопоставлять чекбоксы нужным индексам. я уже спрашивал вас о логике их выбора:

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

А в модальном окне выводить точно также, как и в верстке

Т.е. в модальном окне я хотел видеть верстку вот так:

<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>

P.S. Я же смогу допустим сохранять картинку в localStorage ?

Если у меня будет вот такой пример:

<div>
  <p><input class="check" id="check-option-1" name="name" type="checkbox">
  <label for="check-option-1"></label>
  </p>
  <img src="путь к картинке" alt="">
  <h4>Название</h4>
  <p class="copy">1</p>
  <p class="copy-2">1.1</p>
</div>

Получается мне нужно в объект добавить еще ключи и значения?

[Роман]

Genri_Rus,

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

но у параграфов нет id, откуда его брать?

P.S. Я же смогу допустим сохранять картинку в localStorage ?

смотря что вы имеете ввиду под сохранением картинки. если просто текст типа <img src="путь к картинке" alt=""> или путь к картинке то да, если данные содержащие изображение то надо учитывать ограничения на хранение информации в localstorage/

Ограничение размера хранимых данных (как выше было уже сказано, примерно 5 Мб). Это достаточно маленький лимит для приложений, которые должны хранить большой объём данных или нуждаются в возможности работы без подключения к интернету. взято отсюда

Получается мне нужно в объект добавить еще ключи и значения?

да, в последнем примере как раз в массив list вставляются объекты, типа {"id":"id элемента": "p":"текст"}. Вы вполне можете добавлять в этот объект любые ключи и значения, и они будут сохранятся в localstorage.

[Genri_Rus]

Роман, у параграфов классы, причем можно же разные использовать ?

Еще такой вопрос, а если допустим у меня будет вложенность ?

Пример:

<h4>Название</h4>
<p class="copy"><a href="#">1</a></p>
<p class="copy-2"><b>1.1</b></p>

[Роман]

Genri_Rus, вы можете вообще див и его содержимое засовывать в объект целиком.

function addToList(elem) {
    let wrapper = elem.closest(groupWrapperSelector);
    // теперь мы вставляем объект содержащий свойства id и p
    // в свойство p вносим innerText из всех P найденых с помощью wrapper.querySelector(selector)
    list.push({
    	id: elem.id,
    	html: wrapper.outerHTML
    });
  }

и затем так же его извлекать и вставлять в модалку:

function updateModal(list) {
    // тут я до сих пор не понимаю что вы хотите увидеть в модальном окне, поэтому пока такой вывод.
    // если вам нужно чтото другое, вы вполне осилите переписать эту часть так как вам надо
    // в итем лежит объект (смотри addToList), соответственно к его ключам id и p можно обращаться
    modal.innerHTML = list.map(item=>{
    	return item.html;
    }).join("<br/>");
  }

[Genri_Rus]

Роман, т.е. получается в localStorage все таки придется хранить html, если будет вложенность ?

[Роман]

Genri_Rus, не обязательно, вы можете придумать свой формат на основе json с учетом вложенности. Например хранить както так

[
  {
    id: "blablabla",
    list: [
       {
           type: "p",
           class: "classname1",
           list: [
               {
                   type: "text",
                   text: "2.1"
               },
               {
                   type: "img",
                   class: "какойто класс",
                   src: "/blabla.ru/picture.img"
               }
           ]
       }
    ]
  },
  {
    id: ......
  },
  ...
]

Или оюбым другим способом, который можно хранить как текст

[Genri_Rus]

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

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

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

Типа вот так:

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

[Роман]

Genri_Rus, да, вполне работоспособно.

[Genri_Rus]

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

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

[Роман]

Genri_Rus, сплю, завтра гляну

[Genri_Rus]

Роман, ок )

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

[Роман]

Genri_Rus, не за что.

по поводу:

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

я бы сделал как то так:

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

или так:

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

это позволит упростить логику в цикле

function updateModal(list) {
    for let key in obj {
       // тут теперь не надо делать проверку на тип ключа (id или tag)
    }  
}

[Genri_Rus]

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

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

[Роман]

Genri_Rus, не могу посмотреть код с телефона. Буду дома только завтра ближе к ночи. Либо кинте код в теге code.

[Роман]

Genri_Rus, получилось открыть (иногда телефон не корректно отобрадает и не могу переключиться на вкладку js)

И так, открыл, смотрю и не понимаю вот это

this.p = p;
        console.log(this.p = p);

Для чего тут console.log(this.p = p); присваивание

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

[Genri_Rus]

Роман, брал пример отсюда: 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;
}

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

[Роман]

Genri_Rus, можно идти разными путями. Например можно запилить класс для работы с локалсторадж, который будет иметь несложный api для работы с данными и автоматически сохранять изменения в хранилище, добавить в него шину событий, которая позволит вешать обработчики на события изменения данных в хранилище. Можно запилить отдельный класс или набор функций, для работы конкретно с чекбоксами. Можно вообще создавать объект напрямую. Например так:

var data = {
   id: id,
   p: p
}

Подходов множество, вопрос лишь в их целесообразности при решении конкретной задачи. Ваш код, тот который не для примера смешивает в одну кучу сами данные, логику их сохранения/извлечения, логику их обработки. Это сильно затрудняет понимание кода и ведет к сложноотлавливаемым ошибкам.

Я до завтрашнего вечечера буду только на телефоне, поэтому с кодом поработать толком не смогу. Завтра вечером попробую накидать решение аашей задачи так как его вижу я, с комментариями и пояснениями.

[Genri_Rus]

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

У меня просто на 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. Еще раз благодарен за объяснения ! :)

[Роман]

Genri_Rus, с одной стороны в коде вроде почти нет ничего лишнего, но с другой, обращения в локалсторадж как на чтение так и на запись происходять в нескольких местах (в 4х если мне не ищменяет память) при этом по минимуму достаточно 1 операции на запись и одной на чтение. Это несколько запутывает логику синхронизации хранилища и состояния приложения. Когда ковырял этот код с целью засунуть вместо id объект с данными, периодически в массиве оказывалась в дополнение к внесенным объектам простая строка с id, так и не смог найти откуда она там берется. Правда искал нк долго)
Как уже написал, завтра вечером кину свой вариант работы с локалсторадж.

[Роман]

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

[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</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 опять таки проблемы, но я все равно Вам очень благодарен !

[Genri_Rus]

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

[Роман]

Genri_Rus, прчему нет. Код как код)
Только Item в коде выше ничего не делает кроме запомания переданных параметров.

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

Присваивание this.p = p внутри console.log(this.p = p); не имеет смысла. Вы уже его сделали строчкой ранее. Замените на

console.log(this.p);

Вот эта строка вообще бессмысленна
let item = cart.push();
Так как метод push предназначен для вставки элемента в массив,
Вы ыидимо хотите достать из массива, но перепутали название метода.
Для того чтобы достать значения есть методы:
Array.pop() // вынуть из массива последний элемент
Array.unshift() // вынуть из массива первый элемент.

Оба метода иизменяют сам массив, забирая из него элемент.

Вызов функции Item(id, p); тоже не имеет смысла. Данная функция просто запоминает переданные ей параметры в своей внутренней области видимости, но никак их в дальнейшем не использует.

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

[Роман]

Genri_Rus, да нет минусов у локалсторадж, он на ура выполняет задачу для которой предназначен. Но если мы хотим от него чегото большего, то должны позаботится о том, чтобы обойти некоторые технические ограничения (можно хранить только строки, поэтому мы преобразуем массив объектов в строку) и логические ограничения (в случае 2х и более вкладок, мы должны позаботится об адекватных механизмах сверки состояний и синхронизации)

[Genri_Rus]

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

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

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

[Genri_Rus]

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

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

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

[Genri_Rus]

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

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

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

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

[Роман]

Genri_Rus, сегодня-завтра не смогу помочь, в командировке.

[Genri_Rus]

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

[Роман]

Genri_Rus, пока еще в командировке, но сегодня вечером попробую скинуть вариант, если найду комп )))

[Genri_Rus]

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

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;
          }

[Роман]

Genri_Rus, очень извиняюсь, пока не получается ни выделить время ни найти техническую возможность, я про свое обещание помню, ближайшие несколько дней его выполню.

[Genri_Rus]

Роман, спасибо за ответ!

P.S. Будет время, то всегда буду рад помощи ;)

[Genri_Rus]

Роман, сделал, чтобы галочки сохранялись, если id чекбокса попадал в localStorage

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

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

[Genri_Rus]

Роман, добрый день!
Ну как у вас Дела ?)

Я вот сделал сохранение и удаление галочек, а как теперь правильно выводить данные в модальное окно ?

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

[Genri_Rus]

Роман, смотрите, я сделал вывод:

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

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

[Роман]

Genri_Rus, приехал домой наконец то, делаю обещанный вариант.

а как теперь правильно выводить данные в модальное окно ?

Тут многое зависит от того, для чего это делается.
например если ваше модальное окно это корзина, в которую пользователь добавляет товары, то вижу 2 варианта:
1. технические данные сохраняем в локалсторадж, и одновременно пихаем визуализацию в модальное окно. данный вариант потребует доп.логики по удалению из модалки товаров с которых сняли чекбоксы
2. технические данные сохраняем в локалсторадж, а для визуализации делаем отдельную фанку, которая удаляет все из модалки и вставляет в него визуализацию сгенерированную на основе данных имеющихся в настоящий момент в хранилище. данный вариант чуть помедленней, но не требует супер заморочек с логикой.

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

[Роман]

Genri_Rus, доработал демку, осталось только понять, что же вы хотите видеть в модальном окне.

[Genri_Rus]

Роман,

В любом случае для обоих вариантов мне надо понять, что же вы хотите в конечном варианте видеть в модальном окне. Если вас не затруднит, дайте как образец - готовый 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"

[Роман]

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

[Genri_Rus]

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

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

[Роман]

Роман, исправил

[Genri_Rus]

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

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

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

<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>

[Роман]

Genri_Rus,

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

нет, в localStorage каждому уникальному ключу соответствует одна строка, а вот уже внутрь этой строки можно пихнуть что угодно. Посмотри из примера реализацию класса Storage.

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

Мой пример - это переделанный ваш пример, потому и названия оттуда вытянул

[Genri_Rus]

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

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

[Genri_Rus]

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

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

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

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

[Роман]

Genri_Rus, набросал такой вариант, к которому у меня самого есть много нареканий. По сути речь идет о том, что привязаны к чекбоксу могут быть разные элементы в любых количествах (я так подозреваю что могут быть и элементы P и IMG и многие другие). Для того чтобы сериализовать их в json с возможностью обратной десериализацией нужно либо встраивать достаточно мощный алгоритм, способный распарсить ветку DOM либо просто сохранять содержимое каждого элемента как html беря его из свойства element.outerHTML.
В примере я пошел по первому варианту, но без парсера, поэтому добавляя к чекбоксам элементы отличные от P получите много неприятных сюрпризов.

PS: данный вариант не совместим с предыдущими, поэтому перед просмотром желательно отчистить локалсторадж

[Роман]

Genri_Rus,

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

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

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

[Genri_Rus]

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

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

Вот ваш пример: 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: 'путь к картинке'

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

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

[Роман]

Genri_Rus, вариант с 0: {id: "check-option-1", p: ["1", "1.1"]} сделать можно, но как вы будете восстанавливать значения классов ?

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

[Genri_Rus]

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

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);

[Роман]

Genri_Rus,

вот вариант который сохраняет в локалсторадже что то типа:

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

[Genri_Rus]

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

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

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

[Genri_Rus]

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

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>';
  });

[Роман]

Genri_Rus, получится (с некоторыми оговорками), но если элементов P будет больше чем 2 то они не будут отображены:

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);

можете в последнем варианте подправить функцию reDrawModal

или вот вариант где я уже исправил

ОГОВОРКИ:
1. в cart.hash (и в localstorage. они всегда синхронны) лежит примерно это:

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

2. в cart.list лежит примерно это:

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

Тоесть писать надо не:
for (let i in cart)

а например:
for (let i in cart.list)

и соответственно в строка cart[i].p[i] содержит ошибку. индекс i в cart.list[i] нельзя
вставлять в .p[i]. но можно сделать както так:

let output = "";
  console.log("cart:",cart);
  for (let i in cart.list) {
    output += '<div class="item">';
    output += '<p class="copy">' + cart.list[i].p[0] + '</p>';
    output += '<p class="copy-2">' + cart.list[i].p[1] + '</p>';
    // в этом варианте если элементов P будет больше чем 2 то все элементы с индексами 2 и выше будут проигнорированы
    output += '</div>';
  }

или так:

let output = "";
  console.log("cart:",cart);
  for (let i in cart.list) {
    output += '<div class="item">';
    for (let p in cart.list[i].p) {
      output += '<p class="copy">' + cart.list[i].p[p] + '</p>';
      // в этом варианте неясно откуда брать класс для P
    }
    output += '</div>';
  }

[Genri_Rus]

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

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

[Genri_Rus]

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

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

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

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

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

[Genri_Rus]

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

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

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

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

[Роман]

Genri_Rus, немного занят был. Оптимизации в моем варианте нет, писал так, чтобы было понятно. Свернуть вы уже сами сможете.

[Genri_Rus]

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

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

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

[Роман]

Genri_Rus, по вопросу с картинками не подскажу, нет понимания того что вы хотите получить в результате.
По поводу гибкости моего варианта скажу так, класс Storage это всего лишь абстракция над localstogage, позволяющая работать с массивами объектов сохраненными в локалсторадж по ключу так, чтобы не задумываться о преобразовании данных в строку и обратно.

[Genri_Rus]

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

<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
});

[Роман]

Genri_Rus, потому что this в данном конкретном случае указывает на

<input class="check" id="check-option-1" name="name" type="checkbox">

, в котором есть свойство id но нет свойства src.

[Genri_Rus]

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

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

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

[Роман]

Genri_Rus, мне кажется что вы делаете что то не то. Возможно я ошибаюсь, но ответьте на несколько вопросов?

1. сколько картинок у вас может быть внутри одного блока с чекбоксом?
2. если картинок может быть больше чем одна в одном блоке , то для всех ли этих картинок в одном блоке должны быть сохранены src?
3. Если на вопрос 1 и 2 ответ отрицательный, то зачем вы пытаетесь получить путь к нескольким картинкам?

[Genri_Rus]

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

[Роман]

Genri_Rus, почти не пользуюсь jquery, но нагуглил за 3 минуты:

Иногда возникает ситуация, когда необходимо выбрать все дочерние элементы. Для этого в jQuery есть селектор >. Например, у нас есть следующий html код:

<div id=”content”>
 <p>Привет</p>
 <p>Мы начинаем изучать jQuery</p>
 <p>И сейчас  мы знакомимся с селекторами выборки элементов</p>
</div>

И нам необходимо выбрать все p, которые находятся внутри тега div id=”content” Наш код будет выглядеть следующим образом:

$(“#content > p”);

на выходе: [
"lorempixel.com/30/30/city",
"lorempixel.com/40/40/city"
]

Конкретно в вашем случае, можно сделать как то так:

[Genri_Rus]

Роман, спасибо!
А если одно фото будет, то можно сделать проще ?

[Роман]

Genri_Rus, если одно, то можно и проще. я не знаю как именно отработает ваш вариант:
let img = $('img').attr('src');

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

[Genri_Rus]

Роман, спасибо Вам за все !

А вы в php разбираетесь ?

У меня просто сайт полетел и не могу понять почему (

я как раз этот код готовил, а мой сайт поломался (

P.S. Можно как-то с вами связаться по почте или соц. сети?

[Роман]

Genri_Rus, php знаю очень поверхностно, моя ниша это C, C++, Perl, JS и Node.js, при этом на C, C++ и Perl-е уже 10 лет ничего не писал, но пока еще помню)))

[Роман]

Genri_Rus, связаться то можно, но ближайшие 3 месяца я вряд ли смогу оказать вам серьезную помощь, нарисовалось очень много работы.

[Genri_Rus]

Роман, а если я заплачу ?)

Вои мой вк: https://vk.com/id354979644

Или почта: [e-mail]

P.S. Этот проект xml парсер с digiseller, там обнова пришла и все поломала (

[Genri_Rus]

Роман, доброго времени суток!

Такой вот вопрос, а если у меня не будет во втором блоке title ?

Пример: https://codepen.io/Genri_Rus/pen/gyKjRR

У меня во втором блоке в модальном окне в title уже пишет undefined

А можно как-то удалять title, если он undefined ?

[Роман]

Genri_Rus, добавил проверку на title (94 строка)
но у вас там проблемы похлеще. в локалсторадже лежат объекты, а вы читаете значения из локалсторадж в переменную cart, которая должна быть массивом, но после загрузки из локалсторадж становится объектом а затем пытаетесь обратится к cart как к массиву (вызываете методы .push и .filter в 41 и 46 строках соответственно). Добавил в 40 и 45 строки вывод переменной cart в консоль где видно, что там объект.

[Genri_Rus]

Роман, а пример можно, заранее спасибо )

P.S. Я так понял в моем варианте нужно полностью переделывать код ?

[Роман]

Genri_Rus, ох блин, сори)))) ссылку то не кинул)))

https://codepen.io/lastuniverse/pen/qGBRZK

ошибки валяться в консоль при включении и выключении чекбоксов.

P.S. Я так понял в моем варианте нужно полностью переделывать код ?

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

[Genri_Rus]

Роман, спасибо за ответ )

А че оно тогда все работает ?)

Кстати - это такая простая проверка на undefined (cartArray[i].title?

Так просто ? Я думал все будет гораздо сложнее ...

[Роман]

На undefined и на 0 и на пустую строку

[Genri_Rus]

Роман, круто

Т.е. знак (?) все это проверяет ?

[Роман]

Genri_Rus, нет, это просто сокращенная форма if .. else.
Посмотри тернарные операторы

[Genri_Rus]

Роман, понял, а не в сокращенном варианте это так было внутри цикла?

if (title !== undefined ) {
  mHTML += '<a href="' + cartArray[i].a + '" title="' + cartArray[i].title + '"><img src="' + cartArray[i].img + '"></a>';
} else {
 mHTML += '<a href="' + cartArray[i].a + '"><img src="' + cartArray[i].img + '"></a>';
}

[Роман]

if (title) {
  mHTML += '<a href="' + cartArray[i].a + '" title="' + cartArray[i].title + '"><img src="' + cartArray[i].img + '"></a>';
} else {
 mHTML += '<a href="' + cartArray[i].a + '"><img src="' + cartArray[i].img + '"></a>';
}

[Genri_Rus]

Роман, а вот последний вопрос )

А можно сделать так, что если ключ title в массиве LocalStorage undefined, то он не записывался в массив?

[Роман]

Genri_Rus, рассмотрите внимательно мой вариант, в котором был реализован класс сторадж, в нем это легко реализуется.

[Genri_Rus]

Роман, а в нем уже будет удаляться, т.е. там пример есть такой на проверку ?

[Роман]

Genri_Rus, не совсем, я не предлагаю вам взять мой вариант, возмите только класс Storage и работайте с локалсторадж через него а в метод класса add добавтье проверку на ундефайнед и если устанавлмвается неопределенное значение вызывайие метод del.

[Genri_Rus]

Роман, а пушить (push) ничего не надо будет после проверки ?

[Genri_Rus]

Роман, хм, а у меня не стал добавляться ключ title в localStorage, если у меня undefined

После этой проверки:

mHTML += '<a href="' + cartArray[i].a + '"' + (cartArray[i].title?' title="' + cartArray[i].title + '"':'') +'><img src="' + cartArray[i].img + '"></a>';

[Роман]

Genri_Rus, вот. Переименовал метод add в метод set (так правильнее) и сделал в нет проверку на наличие переменной, если устанавливаемая переменная пустая строка, ноль, false или undefined, то данный id будет удален.



посмотрите по коду:
1. как создается объект cart от класса Storage
2. как производится обращение к объекту cart (внесение, получение и удаление данных)
3. Вставтье класс Storage и объект cart в свой код и работайте с localstorage через методы объекта cart.

сам объект catr так же имеет свойства:
catr.list - содержит синхронизированную копию данных в виде масива, хранящихся в licalstorage по ключу 'local'
catr.hash - содержит синхронизированную копию данных в виде ассоциативного масива (объекта), хранящихся в licalstorage по ключу 'local'

ВАЖНО!!! свойства catr.list, catr.hash можно использовать только для чтения. При попытке записи данных через эти свойства вы получите рассинхронизацию между данными хранящимися в этих свойствах и licalstorage

[Genri_Rus]

Роман, еще раз спасибо Вам за детальные примеры и уделенное время
Буду разбираться, в планах у меня сделать удаление каждого товара из модального окна по крестику, общая стоимость и т.д., сам уже тогда попытаюсь что-то дополнить и Вам тоже скину )

И для этого примера, нужно точно также сделать ?

https://codepen.io/lastuniverse/pen/rbgJxp

[Роман]

Genri_Rus, до 83 строчки просто скопируйте и вставьте к себе, а далее уже по своему, просто запись и чтение сохраняемых в локалсторадж производите через объект cart не задумываясь как там оно работает:

внести значение: cart.set(id,data);
изменить значение: cart.set(id,data);
удалить значение: cart.del(id,data); или cart.set(id,undefined); или cart.set(id,0); или cart.set(id,""); или cart.set(id,false);
получить значение: var item = cart.get(id);
получить массив значений: cart.list;
получить ассоциативный массив значений: cart.hash;

при использовании методов cart.set и cart.del сохранение в локалсторадж происходит автоматически.
Чтение из локалсторадж происходит при создании объекта const cart = new Stogage('local'); (в данном случае cart будет работать со значениями сохраненными в локалсторадж под ключем 'local')

[Genri_Rus]

Роман, буду разбираться )

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

Я кое-что брал с этого примера: https://codepen.io/Fullzero/pen/QMNbBm

P.S. А в этом примере: https://codepen.io/Fullzero/pen/QMNbBm тоже логика нарушена ?

[Роман]

Genri_Rus, я уже начал путаться в этих примерах)))))
У вас была нарушена всего лишь логика работы с локалсторадж, потому и посоветовал работать через класс Storage, он позволит не задумываться о непосредственно сохранении и чтении в/из локалсторадж.
По этим примерам на память не скажу, нужно заново вникать, тестить и смотреть.
Думаю с логикой работы сами разберетесь, а логика синхронизации с локалсторадж зашита в класс.

[Genri_Rus]

Роман, да я тоже ^D

Логика нарушена вот здесь ?

obj.addItemToCart = function(id, a, title, img, p) {
		var item = new Item(id, a, title, img, p);
		cart.push(item);
		saveCart();
	};

[Роман]

Genri_Rus, очень извиняюсь, обманул вас. Видимо у меня в локалсторадж лежало не [item1, item2, и т.д] а {id1:item1, id2:item2, и т.д}. Осталось от предыдущих попыток работы)

я про этот вариант пишу https://codepen.io/Genri_Rus/pen/gyKjRR

если у вас в локалсторадж хранятся записи вида [item1, item2, и т.д] то я не прав и у вас все норм.
если же у вас в локалсторадж хранятся записи вида {id1:item1, id2:item2, и т.д} то тогда нарушена логика хранения и обработки данных в коде.

[Роман]

Роман, просто занят своей работой, в результате недоглядел. Трудно постоянно переключать внимание с одного на другое.

[Genri_Rus]

Роман, т.е. вот так не должно быть ?

0: Item {id: "check-option-1", a: "http://lorempixel.com/30/30/city", title: "TITLE + добавляет всплывающую подсказку к тексту ссылки", img: "http://lorempixel.com/30/30/city", p: Array(2)}
1: Item {id: "check-option-2", a: "http://lorempixel.com/30/30/tech", img: "http://lorempixel.com/30/30/city", p: Array(2)}

[Genri_Rus]

Роман, правильно же, что у меня

[item0, item1, и т.д] - в массиве если

[Роман]

Genri_Rus, не совсем, вы выберите вариант хранения и под него все делайте.

если у вас индексы цифровые то лучше чтобы было так:

[
   {id: "check-option-1", a: "http://lorempixel.com/30/30/city", title: "TITLE + добавляет всплывающую подсказку к тексту ссылки", img: "http://lorempixel.com/30/30/city", p: Array(2)},
   {id: "check-option-2", a: "http://lorempixel.com/30/30/tech ... }
]

если же вместо индексов использовать id. то лучше так:

{
"check-option-1": {id: "check-option-1", a: "http://lorempixel.com/30/30/city", title: "TITLE + добавляет всплывающую подсказку к тексту ссылки", img: "http://lorempixel.com/30/30/city", p: Array(2)}
"check-option-2": {id: "check-option-2", a: "http://lorempixel.com/30/30/tech
}

от того какой вариант использовать зависит то как добавлять и удалять элементы

в первом варианте для добавления использовать push но обязательно проверять на дублирование, а для удаления или получения элемента нужно будет перебрать весь массив.

во втором варианте для добавления, получения или удаления достаточно работать по id но не будут напрямую работать методы push, filter прочие методы массивов

класс Storage реализует второй вариант, а для работы с методами массива реализует копию данных в виде обычного массива (cart.list)

как именно хранить данные решать только вам, но как сказано выше это меняет и логику обработки.

[Роман]

Genri_Rus, и еще, у вас в вашем варианте используются именно цифровые индексы, то есть вы попытались смешать оба способа, но получили только усложнение и никакого профита, так как по ID вы элемент по id уже не сможете достать.

[Genri_Rus]

Роман,

если у вас в локалсторадж хранятся записи вида [item1, item2, и т.д] то я не прав и у вас все норм.
если же у вас в локалсторадж хранятся записи вида {id1:item1, id2:item2, и т.д} то тогда нарушена логика

В этом варианте:

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

Вот так хранятся записи:?

{id1:item1, id2:item2, и т.д} ?

Просто в моем примере (по ссылке который) сначала идут item'ы, а потом только id

[item0, item1, и т.д] - массив данных

и еще, у вас в вашем варианте используются именно цифровые индексы, то есть вы попытались смешать оба способа, но получили только усложнение и никакого профита, так как по ID вы элемент по id уже не сможете достать.

Это да, но я попытаюсь сделать так:

{
"check-option-1": {id: "check-option-1", a: "http://lorempixel.com/30/30/city", title: "TITLE + добавляет всплывающую подсказку к тексту ссылки", img: "http://lorempixel.com/30/30/city", p: Array(2)}
"check-option-2": {id: "check-option-2", a: "http://lorempixel.com/30/30/tech
}

[Роман]

Genri_Rus, в этом варианте хранятся вот так

[
	{"id":"check-option-1","a":"http://lorempixel.com/30/30/city","title":"TITLE + добавляет всплывающую подсказку к тексту ссылки","img":"http://lorempixel.com/30/30/city","p":["1","1.1"]},
	{"id":"check-option-2","a":"http://lorempixel.com/30/30/technics","img":"http://lorempixel.com/30/30/technics","p":["2","2.1"]}
]

для проверки вставьте после
const localName = 'local';
такую строчку, она выведет в консоль то что в локалсторадж
console.log(localStorage.getItem(localName));

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

localStorage.setItem(localName, JSON.stringify([]));

если же вы хотите так:

{
"check-option-1": {id: "check-option-1", a: "http://lorempixel.com/30/30/city", title: "TITLE + добавляет всплывающую подсказку к тексту ссылки", img: "http://lorempixel.com/30/30/city", p: Array(2)}
"check-option-2": {id: "check-option-2", a: "http://lorempixel.com/30/30/tech
}

то возмите мой класс сторадж, но перед использованием отчистите локалсторадж так

localStorage.setItem(localName, JSON.stringify({}));

[Роман]

Genri_Rus, и хорошо бы использовать разные значения const localName = 'local'; для разных вариантов, это бы позволило не путаться из-за данных оставшихся в локалсторадже от других версий

[Genri_Rus]

Роман,

но у вас там проблемы похлеще. в локалсторадже лежат объекты, а вы читаете значения из локалсторадж в переменную cart, которая должна быть массивом, но после загрузки из локалсторадж становится объектом а затем пытаетесь обратится к cart как к массиву

Я правильно понял, что нужно сделать так:

obj.removeItemFromCart = function(id) {
    console.log("45 строка:",cart);
   cart = [] - тут изначально добавить пустой массив
		cart = cart.filter(function(e) { return e.id !== id});
    saveCart();
	};

[Роман]

Genri_Rus, цитата которую вы привели - ошибочна, это у меня в локалсторадже лежали объекты от моих попыток. я уже об этом писал.

[Genri_Rus]

Роман, а то есть в моем примере более или менее нормально ?)

Не говоря об этом нюансе:

[
  {"id":"check-option-1","a":"http://lorempixel.com/30/30/city","title":"TITLE + добавляет всплывающую подсказку к тексту ссылки","img":"http://lorempixel.com/30/30/city","p":["1","1.1"]},
  {"id":"check-option-2","a":"http://lorempixel.com/30/30/technics","img":"http://lorempixel.com/30/30/technics","p":["2","2.1"]}
]

[Роман]

Genri_Rus, если вы хотите туда вставить пустой массив, вы обнулите локалсторадж вставив туда пустой массив.
я делал это по другому, но можно и так, просто не забудьте после обнуления удалить эту строчку.

[Роман]

Genri_Rus, я не проводил ревизию всего кода, просто посмотрел конкретные точки.

[Genri_Rus]

Роман, хорошо )

Тогда я пошел экспериментировать, потом Вам скину пример и еще раз с праздником Вас )

[Genri_Rus]

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

Появилась снова проблема
Дело в том, что если этих параграфов нету на других внутренних html страницах, то модальное окно пустое

Как только я посещаю те страницы, где эти параграфы есть на странице, то сразу же в модальном окне все есть

Что посоветуете в данном случае делать ?

[Genri_Rus]

Роман, по идее же должны выводиться данные в модальное окно на других страницах ?

В javascript'e формируется же верстка ?

if ($(this).prop('checked')) {
        let a = $(this).parent().siblings('a').attr('href');
        let title = $(this).parent().siblings('a').attr('title');
        let img = $(this).parent().siblings().children('img').attr('src');
        let p   = $(this).parent().siblings('.copy, .copy-2');
        shoppingCart.addItemToCart(id, a, title, img, p);
        modalCart();
      
        modal.addClass('modal-show');
	  } else {
		  shoppingCart.removeItemFromCart(id);
      modalCart();
	  }

[Genri_Rus]

Роман, нашел ошибку, из-за этого конфликт был:

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

[Genri_Rus]

Роман, добрый день

Возник небольшой вопрос: https://codepen.io/Genri_Rus/pen/gyKjRR

Как теперь удалять элементы по клику на иконку удалить, чтобы основные чекбоксы становились не в состоянии checked ?

[Genri_Rus]

Роман, я так сделал:

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

Но у меня почему-то удаляется только один элемент в модальном окне