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

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

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

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

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

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

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

Genri_Rus,

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

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

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

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>

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

Genri_Rus,

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

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

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

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

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

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

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

Genri_Rus,

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Как отобразить таблицу в 1000 строк как можно быстрее?

Такой вариант не подойдет?

Реализация расчетов из Excel в JS?

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

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

Как редактировать код страницы в браузере при её загрузке?

Если загрузка по https то никак.
Если по http то способов несколько:
1. Подмена ip в файле hosts на localhost, на котором висит прокси с функцией подмены кода страниц.
2. Проксирование трафика и подмена кода на уровне протокола tcp/ip
3. Возможны и другие варианты

Есть ли в Python понятие структуры по аналогии с С++?

Не соглашусь с вами. Стпуктуры фактически незаменимы при работе с бинарными форматами файлов (кастомными или настолько узкоспециализированными что для работы с ними нет готовых решений)

Linux для frontend developer`a?

С nodejs проблем нет, но возможны проблемы с пакетами, использующими c/c++.

Как скачать файл на сервер из input[type=file]?

Vlad, в таком случае я вам не подскажу решение. Ждите специалистов по мобильное приложение Сервер для PHP

Как скачать файл на сервер из input[type=file]?

Vlad, у вас есть сервер? Как он называется?

Как скачать файл на сервер из input[type=file]?

Vlad, речь не про локальный/удаленный а про apache/nginx/express/и т.д.