Как вывести checked, если id чекбоксов сохранены в localStotage?

Question

[Genri_Rus]

Всем доброго времени суток и с наступающим праздником

Вопрос в названии, вот пример: https://codepen.io/Genri_Rus/pen/gyKjRR

В localStorage данные сохраняются, но галочки не сохраняются после перезагрузки страницы:

const shoppingCart = (function() {
     let cart = [];
     const localName = 'local';

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

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

      function loadCart() {
        cart = JSON.parse(localStorage.getItem(localName));
        if (cart === null) {
          cart = []
        }
      }
  
      loadCart();
  
      var obj = {};

			obj.addItemToCart = function(id, p) {
				for (var i in cart) {
					if (cart[i].id === id) {
						saveCart();
						return;
					}
				}

				var item = new Item(id, p);
				cart.push(item);
				saveCart();
			};
      return obj;
})();
    $('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')) {
        let id = $(this).attr('id');
        let p  = $(this).parent().siblings('.copy, .copy-2').text();
        shoppingCart.addItemToCart(id, p);
      
        modal.addClass('modal-show');
     }
});

Answer 1

[Владимир Проскурин]

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

Comments

[Genri_Rus]

Спасибо за помощь !

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

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

[Genri_Rus]

Может можно как-то по-другому ?

Все удаляется, но если удалить первый элемент, то почему-то удаляется второй ...

[Genri_Rus]

Хотел бы узнать ваше мнение на этот счет !

[Владимир Проскурин]

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

obj.removeItemFromCart = function(id) {
    cart = cart.filter(function(x) { return x.id !== id});
    saveCart();
};

пример https://codepen.io/anon/pen/YMgvQw?editors=0010

[Genri_Rus]

Владимир Проскурин, спасибо за помощь !

Я вот слышал, что метод filter не поддерживается в internet exploler - это правда ?

[Владимир Проскурин]

Genri_Rus, с IE9 поддерживается, этого достаточно.

[Genri_Rus]

Владимир Проскурин, а вот с точки зрения правильности написания кода, так вообще правильно реализовывать ?

Или где-то можно упростить ? Заранее благодарен за ответ !

[Genri_Rus]

Владимир Проскурин, смотрите, я сделал вывод:

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

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

[Genri_Rus]

Владимир Проскурин, как теперь в данном случае удалять по клику на иконку ?

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

P.S. У меня в модальном окне только один элемент удаляется

[Владимир Проскурин]

Genri_Rus, у вас там много странных вещей. Например вот

function removeItem(id) {
  $('.item').on('click', '.remove-item', function() {
    shoppingCart.removeItemFromCart(id);
    console.log(id);
    modalCart();
  });
}

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

[Genri_Rus]

Владимир Проскурин, я сделал вот так, но тогда удаляется все сразу:

function removeItem() {
  $(".modal").on("click", ".remove-item", function() {
    let delItem = shoppingCart.listCart();
    console.log(delItem);
    for (let i in delItem) {
     // console.log(delItem[i].id);
     shoppingCart.removeItemFromCart(delItem[i].id);
     break;
    }
    modalCart();
  });
}

Мне же нужно по клику удалить не только в модальном окне, но и удалить в localStorage

Возможно ли вызывать эту функцию по клику ?
Или нужно писать новую функцию ?

obj.removeItemFromCart = function(id) {
    cart = cart.filter(function(x) { return x.id !== id});
    saveCart();
};

[Владимир Проскурин]

Genri_Rus, у вас в removeitem опять цикл, который удаляет не определенный элемент (у которого кликнули на корзину), а удаляет все элементы из корзины. Передавайте в removeItemFromCart нужный id товара и все. Чтобы получить id товара, нужно прописать к кнопке удаления товара атрибут data-product-id, который будет равен id товара. И в обработчике клика можно будет получить этот id через $(this).data('product-id'), и передать в removeItemFromCart.
https://codepen.io/anon/pen/BejmgM?editors=0010

[Genri_Rus]

Владимир Проскурин, спасибо )

А вот еще такой вопрос, без data атрибута реализовать такое удаление будет сложно ?

[Genri_Rus]

Владимир Проскурин, также можно или нежелательно ?

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

[Владимир Проскурин]

Genri_Rus, можно и так, без разницы.

[Genri_Rus]

Владимир Проскурин, а вот без уникальных идентификаторов удалять такое невозможно ?

[Владимир Проскурин]

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