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

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

Я уже знаю, как хранить и извлекать данные из локального хранилища. Моя проблема в том, что я не знаю, как однозначно идентифицировать значки для хранения и извлечения их значений позже и реализовать это в коде javascript.

Если вы запустите свой сниппет сейчас, что идентифицирует ваши две строки? Это лейблы Iteration и Selection, верно? Если вы не свяжете эти строки с числовым идентификатором, это ваш уникальный идентификатор прямо здесь. Следующий вопрос - как получить этот текстовый идентификатор из разметки в свой javascript. У вас есть идеи, как этого добиться? Если бы это был я, я бы начал с добавления этих строк в качестве атрибута где-нибудь в разметке. Как вы думаете, куда лучше всего пойти?

Сначала я попытался использовать заголовок главы и данные текущего списка для ключа данных, которые нужно сохранить, и я получил значение значка, по которому щелкают, с некоторым регулярным выражением. Спасибо, Джозеф, я думаю, у меня есть идея. Я буду использовать массив с названием главы (т.е. php), а числовой идентификатор строк будет использоваться в качестве индекса для массива. но я все еще не могу придумать, как определить, какие значки и их значения, сохранить их в паре ключ-значение и получить их позже

Отлично. Как определить значок. Вы уже знаете, какой из них был выбран при доступе к e.target. Исходя из этого, вы уже получаете доступ к значению с помощью .textContent, который работает. Вы можете использовать e.target.getAttribute('your-attribute-name'). При этом вы можете разместить свой ключ для этого значения на самом значке с помощью <span class = "badge badge-info float-right" your-attribute-name = "whatever">. Вы также можете получить доступ к родительскому атрибуту с помощью e.target.parentNode.getAttribute('whatever'). Выбор за вами. Не могли бы вы обновить свой вопрос аналогичной логикой?

Я просто добавил идентификаторы для значков (потренироваться и пересмотреть) Оттуда, как мне перейти к получению их индивидуальных значений. key = php [индекс строки], значение = ??

Я понял вашу точку зрения, и оттуда, как мне продолжить в js для хранения значений значков. Какие-либо предложения. Я просто не могу правильно думать, лол.

Итак, теперь вы можете выбрать тип значка, но у вас все еще нет строки. Вы можете использовать тот же процесс для идентификации строк (например, <li class = "list-group-item" data-id = "selection">). Из вашего javascript вы получаете доступ к этим значениям с помощью getAttribute. Внутри атрибута click вы можете создать уникальный идентификатор (строка + тип), обратившись к e.target.parentNode.getAttribute('data-id') и e.target.getAttribute('data-type'). Оттуда вы можете объединить их в уникальную строку (например, "iteration.practice") или добавить их в объект javascript (например, [{id:"iteration",type:"practice"}]).

Таким образом, используя приведенный выше пример, можно создать уникальную строку с помощью let key = e.target.parentNode.getAttribute('data-id') + '.' + e.target.getAttribute('data-type'). Это будет ваш ключ, который вы будете использовать в своем локальном хранилище.

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

Верный. Какой формат вы выбрали для ключа локального хранилища?

ключ = e.target.parentNode.getAttribute ('data-id') + '.' + e.target.getAttribute ('тип данных'); например, iteration.practice = 3;

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

@TechXpert Круто! Рад, что смог помочь. :)

Привет, Джозеф, я только что завершил финальную версию проекта и хочу, чтобы вы рассмотрели его: jsfiddle.net/yuvraj034c/pznjpb2c Однако локальное хранилище и значки и не увеличиваются на скрипте Js. Он отлично работает в моем текстовом редакторе: есть некоторые примечания, которые вам нужно запомнить: во-первых, при добавлении подразделов, напишите идентификатор главы, а затем *, а затем имя подраздела. Например, если вы хотите добавить циклы в php, напишите циклы php * в поле ввода для подразделов. Чтобы удалить подраздел: напишите php.loops (не *) в поле ввода удаления.

Если вы хотите удалить главу, введите главу в поле удаления и нажмите кнопку del. Затем откройте консоль и скопируйте предоставленный код, измените значение здесь на имя удаляемой главы (в данном случае php) и перезагрузите страницу.

Я хочу еще раз поблагодарить вас за помощь в разработке логики и кода для локального хранилища. Я бы никогда так не подумал. Это вторая или третья рабочая программа, которую я создал для личного пользования. Я все еще изучаю веб-разработку. Я знаю html / css / bootstrap / javascript до ajax (в настоящее время изучаю), базовый php и все. Можете ли вы дать мне несколько советов о том, что и как учить эффективно и быстро.