Каким образом сохранить назначенный класс после обновления страницы?

Question

[malayamarisha]

Доброго времени суток!
У каждого товара в списке товаров есть "Добавить в избранное".
При клике на "Добавить в избранное" применяется класс, т.е "Добавить в избранное" выделяется другим цветом.
Но после обновления страницы данное выделение пропадает.
Подскажите, пожалуйста, каким образом сохранить выделение после перезагрузки страницы? Спасибо.

Добавление/удаление класса:

if(result == 1)
{
$('.favorites[data-item="'+id+'"]').addClass('activeFavorite');//выделение Добавить в избранное
var wishCount = parseInt($('#want .wishCount').html()) + 1;
$('#want .wishCount').html(wishCount); // Визуально меняем количество у иконки
 if (wishCount > 0)
{
$('.wishCount').addClass('active');
}
}
if(result == 2)
            {
 $('.favorites[data-item="'+id+'"]').removeClass('activeFavorite');//удаление выделения Добавить в избранное
var wishCount = parseInt($('#want .wishCount').html()) - 1;
$('#want .wishCount').html(wishCount); // Визуально меняем количество у иконки
}

Answer 1

[Антон]

LocalStorage, Cookie

Comments

[malayamarisha]

Спасибо что откликнулись.
Только не пойму как сделать.
Если например товар выделен, то в localStorage.setItem('favorItem', 1); записать 1, иначе 2.
Но ведь "Добавить в избранное" может быть у нескольких товаров. Вот на этом и загвоздка, каким образом определить, что именно у этого товара до перезагрузки страницы был выделен "Добавить в избранное".
Подскажите, пожалуйста.

[hzzzzl]

malayamarisha,

localStorage.setItem('favorites', JSON.stringify(['id_1', 'id_23455']))

при загрузке страницы получаем или массив всех фаворитов и добавляем классы на блоки, или ничего

[malayamarisha]

hzzzzl, спасибо что откликнулись.
Не совсем понимаю.

localStorage.setItem('favorites', JSON.stringify([id]))

Тогда при клике на "Добавить в избранное" в localStorage записывается только один id, т.е. только тот, который был выделен последний раз.
А есть какой-нибудь рабочий пример чтобы наглядно посмотреть?

Answer 2

[hzzzzl]

вот сделал фиддл с методом, который сверху писал в комментарии

Comments

[malayamarisha]

Спасибо за пример.
Пока разбираюсь с записью/удалением из localStorage
Записать вроде удалось. Т.е. кликаем на "кнопку", она выделяется и id элемента записывается в localStorage.
Только вот почему-то id дублируется (в localStorage по два id-шника). Пока это не так важно, попозже поразбираюсь.

if(result == 1)
{
var favorItem = $('.favorites[data-item="'+id+'"]').addClass('activeFavorite');
const activeFavoriteID = [];
const favorite = document.getElementsByClassName('activeFavorite');
for (inp of favorite) 
{
         if (inp.getElementsByClassName('activeFavorite'))
          {
               activeFavoriteID.push(inp.id);
               console.log('dfvghjk');
            }
}
localStorage.setItem('activeFavoriteID', JSON.stringify(activeFavoriteID));
}

А вот каким образом теперь удалить id из localStorage, если у товара отменили выделение кнопки?
Делаю так:

if(result == 2)
{
       $('.favorites[data-item="'+id+'"]').removeClass('activeFavorite');
                $('.favorites[data-item="'+id+'"]').addClass('remove');
                const activeFavoriteID = [];
                const favorite = document.getElementsByClassName('remove');

                for (inp of favorite) {
                    if (inp.getElementsByClassName('remove'))
                    {
                        activeFavoriteID.pop(inp.id);
                    }
                }
                localStorage.setItem('activeFavoriteID', JSON.stringify(activeFavoriteID));
}

Но в таком случае удаляются все элементы в localStorage.
Подскажите, пожалуйста, что делаю не так? Спасибо.