Как добавлять множество значений в localStorage?

Question

[Sanator2240]

Здравствуйте. Логика работы функционала такая:

Имеется массив с картинками, по клику на которые в localStorage записывается src самой картинки:

photo.forEach(item => {
            item.addEventListener('click', () => {           
                localStorage.setItem('src', item.src);
                alert('Фото добавленно в избранное!');
            });
        });
      });

Скрипт на другой странице принимает этот src и подставляет его к динамически сформировавшимся картинкам. Получается что-то вроде страницы с избранными картинками.

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

Answer 1

[Сергей Соколов]

Вопрос: почему ... перезаписывает его

Буквальный ответ: потому, что setItem() перезаписывает значение по ключу. Ключ у вас один и тот же всегда: "src".

Как исправить.
В Storage хранятся только текстовые строки. Поэтому можно там держать JSON-представление массива ссылок. Как вариант, добавлять ссылки не в массив, а в Set, чтобы гарантировать их уникальность, без дублей.

spoiler

const links = new Set(); // TODO: надо считать из LS ранее сохранённый

const key = 'photos'; // ключ в Storage

const addLink = (e) => {
  const size = links.size;         // размер до добавления
  links.add(e.target.src);         // добавили ссылку
  if (size === links.size) return; // уже была эта ссылка в наборе

  localStorage.setItem(key, JSON.stringify([...links]));
  alert('Фото добавлено в избранное!');
}

photo.forEach((el) => el.addEventListener('click', addLink));

Answer 2

[Надим]

При выборе картинок, вам нужно сначала составить массив ссылок, далее этот массив перегнать в JSON и уже это JSON пихать в хранилище. Это же явно какое-то учебное задание? У вас все необходимые инструменты для его выполнения уже есть, думайте.