JS - localStorage로 장바구니 기능 구현하기(+중복제거)

        var products = [
            { id: 0, price: 70000, title: 'Blossom Dress' },
            { id: 1, price: 50000, title: 'Springfield Shirt' },
            { id: 2, price: 60000, title: 'Black Monastery' }
        ]
        
        // 데이터 형식
        
        function addTemplet(data){
            data.forEach((e)=>{
                var card =  
                `<div class="col-sm-4">
                    <img src="https://via.placeholder.com/600" class="w-100">
                    <h5>${e.title}</h5>
                    <p>가격 : ${e.price}</p>
                    <button class="buy">구매</button>
                </div>`

                $('.row').append(card);
            })
        }
        
        // 데이터에 맞게 카드형식으로 html append

우선 데이터를 카드 식으로 화면에 뿌려준다.

 

        $('.buy').click(function(e){     
            var title = $(e.target).siblings('h5').text()
            var productInfo = {
               상품명 : title,
               수량 : 1
            }
            
            if(localStorage.getItem('cart') != null){
                var getItem = JSON.parse(localStorage.cart);
		
                getItem.push(productInfo);
                localStorage.setItem('cart',JSON.stringify(getItem));

            } else {
                localStorage.setItem('cart', JSON.stringify([productInfo]));          
            }      
        })

class="buy"인 구매버튼을 누르면 로컬스토리지에 'cart'라는 이름의 키로 title이 저장됨. 

중복을 확인하기 위해 로컬스토리지 value값은 { 상품명: title,  수량: count } 식으로 value값 형식 지정했다.

로컬스토리지에는 나중에 꺼내보기 편하게 JSON형식으로 자료를 넣고 뺀다.

 

1. 로컬스토리지에 cart라는 키가 이미 있으면 선택한 상품정보를 기존 배열에 push해서 추가.

2. 로컬스토리지에 cart라는 키가 없으면 선택한 상품정보 추가.

 

중복된 상품이 추가되면 수량을 올리려면??

 

        $('.buy').click(function(e){     
            var title = $(e.target).siblings('h5').text()
            var productInfo = {
               상품명 : title,
               수량 : 1
            }
            
            if(localStorage.getItem('cart') != null){
                var getItem = JSON.parse(localStorage.cart);
                var check = getItem.findIndex((e) => e.상품명 == productInfo.상품명);

                if(check != -1){
                    getItem[check].수량++;
                    localStorage.setItem('cart', JSON.stringify(getItem));
                } else {
                    getItem.push(productInfo);
                    localStorage.setItem('cart',JSON.stringify(getItem));
                }


            } else {
                localStorage.setItem('cart', JSON.stringify([productInfo]));          
            }      
        })

하루동안 애썼다......

처음엔 forEach문을 통해 getItem 안의 자료를 순회하고 productInfo.상품명과 같은것을 찾으면

수량++ 식으로 했는데.. 나중에 setItem 할때 순회한 횟수만큼 자료가 추가되는 것 아닝가 ㅠㅠ

그래서 이리저리 궁리해서 해결한 방법.

 

findIndex()로 getItem에서 선택한 상품명과 같은 값이 있는 인덱스를 반환하고 check변수에 담는다.

-1이면 중복값이 없는것이니 if(check != -1)로 중복값이 있으면~

getItem[check]를 통해 기존자료의 인덱스에서 수량만 올려서 로컬스토리지에 셋.

 

해결 후에 얼마나 기쁘던지.^^.... array관련 함수들을 적합한 곳에 자유자재로 쓰는 그 날까지ㅠㅠ