장바구니 기능과 localStorage 숙제 질문입니다.

[권보령]

안녕하세요
장바구니 기능과 localStorage 숙제 수강 중 질문이 있어서 글 남깁니다.

구매 버튼 누르면 상품명을 localStorage에 저장하는 숙제를 자바스크립트로만 구현하고 싶은데
배열[ ] 안에 상품명이 저장이 안됩니다...
console로 찍어보면 상품명이 잘 선택되는데 왜 이런 걸까요ㅠㅠㅠ

document.querySelectorAll('.buy')[0].addEventListener('click', function(e) {
    // 구매 버튼의 윗윗 글자(상품명)를 가져와서
    // var title = document.querySelectorAll('.buy')[0].previousElementSibling.previousElementSibling;
    var title = e.target.previousElementSibling.previousElementSibling;
    
    console.log(title);

    localStorage.setItem('cart', JSON.stringify([title]));

    // if (localStorage.getItem('cart') != null) { // 1. 이미 cart라는 항목이 있으면 수정
    //     // 1. 데이터를 꺼내서
    //     // 2. 데이터를 수정하고
    //     // 3. 다시 넣기

    // } else {  // 2. 그게 아니면 or 맨 처음 접속이면
    //     localStorage.setItem('cart', JSON.stringify([title]));
    // }

});

[codingapple]

title 변수는 문자 맞나 콘솔창에 에러는 안뜨나 확인해봅시다

[권보령]

.innerHTML을 붙였더니 해결됐습니다!!

질문이 또 생겼습니다.........
for문을 이용해서 짜고 싶은데
같은 상품의 구매 버튼을 누르면 이미 배열에 있는 상품명이 중복으로 계속 추가됩니다
어떻게 막아야 하는지 감이 안 옵니다ㅠㅠ

for (let i = 0; i < 3; i++) {
    document.querySelectorAll('.buy')[i].addEventListener('click', function(e) {
        // 2. 구매 버튼의 윗윗 글자(상품명)를 가져와서 (e.target.previousElementSibling.previousElementSibling.innerHTML;)
        let title = e.target.previousElementSibling.previousElementSibling.innerHTML;
        // 3. localStorage에 [상품명] 저장

        // 1. 이미 cart라는 항목이 있으면 수정하기
        if (localStorage.getItem('cart') != null) { 
            // (1) 데이터를 꺼내서
            var getCart = JSON.parse(localStorage.getItem('cart'));
            // (2) 데이터를 수정하기 (상품명 추가)
            // .push() : array 배열에 내용 추가
            getCart.push(title)
            
            // (3) 다시 저장하기
            localStorage.setItem('cart', JSON.stringify(getCart));

        } else {  // 2. 그게 아니면 or 맨 처음 접속이면
            localStorage.setItem('cart', JSON.stringify([title]));
        }
    })
};

[codingapple]

getCart 에서 title이 이미 있나 찾아보고 있으면 .push말고 +1만 하라고 코드짭시다

[글쓴이]

글