Level 3 : 9 장바구니버튼 구현하기(localStorage, array, forEach, JSON)

9. 장바구니 기능 만들기

조건

장바구니 버튼을 누르면 localStorage에 배열 형태로 상품이름이 담기고, cart.html을 따로 만들어 해당 html에 상품이 뿌려지도록 만들기

---

풀이

상품리스트

// 여러개의 장바구니 버튼들을 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));
    });
})

장바구니

<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를 사용(
• textContent는 HTML 태그를 제거하고 텍스트만 반환하지만, innerHTML은 태그까지 그대로 문자열로 반환한다.
• array가 처음 비어있을 때는 if문으로 null로 대처해주면 된다.

---

출처 : 코딩애플 https://codingapple.com/