레벨 3 : 9 장바구니 버튼 구현(localStorage, array, forEach, JSON)

9. 장바구니 기능 만들기

상태

장바구니 버튼을 누르면 상품명이 배열 형태로 localStorage에 저장되고 cart.html이 별도로 생성되어 html로 상품이 유통된다.

기본 코드

<div class="container">
    <div class="row">
    </div>
</div>

let products = (
    { id : 0, price : 70000, title : 'Blossom Dress' },
    { id : 1, price : 50000, title : 'Springfield Shirt' },
    { id : 2, price : 60000, title : 'Black Monastery' }
); 
let cardWrap = document.querySelector('.row');

products.forEach(function(a, i){
    let card = `<div class="col-sm-4">
        <img src="https://via.placeholder.com/600" class="w-100">
        <h5>${products(i)('title')}</h5>
        <p>${products(i)('price')}</p>
        <button class="btn-cart">장바구니</button>
        </div>`
    cardWrap.insertAdjacentHTML('beforeend', card);
});

설명

// 여러개의 장바구니 버튼들을 buttonCarts 변수로 선언
let buttonCarts = document.querySelectorAll('.btn-cart'); 
// buttonCarts 안의 각각의 buttonCart elements들에게 함수를 실행
buttonCarts.forEach(function(buttonCart){
	// buttonCart를 클릭하면..
    buttonCart.addEventListener('click', function(){
    	// localStorage의 cart를 key로 가진 데이터들을 titArray 변수로 선언
        let titArray = localStorage.getItem('cart');
        // 만약 titArray가 비었으면 (= 처음 장바구니버튼을 눌렀다면)
        if (titArray === null){
        	// 빈 배열로 만들자!

            titArray = ();
        // 만약 비어있지 않다면
        } else {
            // JSON을 parse해와서 다시 배열 형태로 만들자!

            titArray = JSON.parse(titArray);
        }
        // 그리고 titArray 배열에 buttonCart 이전 이전 태그 안의 텍스트를 마지막에 push!

        titArray.push(buttonCart.previousElementSibling.previousElementSibling.textContent);
        // localStorage에 다시 key: cart, value: titArray인 데이터를 집어넣는다.


        localStorage.setItem('cart', JSON.stringify(titArray));
    });
})

cart.html

<div class="container">
    <div class="row">
    </div>
</div>

// row div를 cardWrap 변수로 선언
let cardWrap = document.querySelector('.row');
// localStorage에 있는 cart가 key인 데이터들을 getTit 변수로 선언
let getTit = localStorage.getItem('cart');
// getTit의 JSON형 데이터를 parse해와 배열로 변환
getTit = JSON.parse(getTit);
// getTit 안의 element들에 함수를 실행하는데..
getTit.forEach(function(a, i){
	//getTit의 데이터 0부터 끝까지 뿌려주기 위해 ${getTit(i)}를 넣어 card 변수로 선언
    let card = `<div class="col-sm-4">
        <img src="https://via.placeholder.com/600" class="w-100">
        <h5>${getTit(i)}</h5>
        </div>`
    // 그런 card를 cardWrap 안쪽 끝부분에 insertAdjacentHTML로 삽입
    cardWrap.insertAdjacentHTML('beforeend', card);
});

내가 배운 것

• 페이지를 새로고침할 때마다 변수가 재설정되기 때문에 페이지를 새로고침하거나 이동하더라도 저장된 데이터를 저장하기에는 적합하지 않습니다.
  
  (그래서 실전에서는 서버를 사용하지만 localStorage는 사용하지 않습니다(
• 텍스트 내용HTML 태그를 제거하고 텍스트만 반환하지만, innerHTML태그를 문자열로 반환하다.
  
  
• 배열이 처음으로 비어 있는 경우 if 문을 사용하여 배열을 null로 처리할 수 있습니다.