장바구니 기능과 localStorage 숙제

[오현우]

2회독 중입니다 
상품을 추가하기 전에 상품명이 이미 localStorage에 있는지 검사하면 되겠군요.
이부분 ㅠㅠ 먼말인지는 알겠는데 어떻게 검사하는지를 모르겠어요 ㅠㅠ 어레이 거기안에있는 값을 비교하면
될 것 같은데 구글찾아봐도 봐도 모르겠음 ㅠㅠ 
2. 아니면 같은 상품 구매 누르면 상품 갯수가 올라가게? 
요것도 ㅠㅠ 1번째만 하면 어떻게 할 거 같긴한데 ㅠㅠ 머리는 아프고 ㅠ 생각은 안나요.
제가 프리패스 끊었는데 그냥 넘어가고 ... 노드js나  리액트 요런거 할떄 자연스럽게 나오나요?
4시간쨰 머리가 너무 아파요 ㅠ

[codingapple]

머릿속으로 생각만하지말고 상품추가버튼 누를때 어떤식으로 동작할지 상세히 글로 설명부터합시다

[오현우]

생각만 한게 아닌데 다시 한번 찬찬히 해 보겠습니다 .

[codingapple]

추가버튼누르면 localStorage에 있는 상품 꺼내서 같은id를 가진 상품이 있는지 찾기부터 합시다

[오현우]

일단 그냥 다시 찬찬히 해봤어요.

        var filter1 = [];
       $('.buy').on('click',function(e){
        
       var filter2 = [];
        var title = $(e.target).siblings('h5').text();
        filter1.push(title);
        for(let i = 0; i < filter1.length; i++){
            if(filter2.includes(filter1[i]) == false){
                filter2.push(filter1[i]);
            }
        }
        localStorage.setItem('cart',JSON.stringify(filter2));

        console.log(filter1);
        console.log(filter2);
       })

로컬 때문에 ; 헷갈려서 아에 그냥 로컬 없이 그냥 변수 만들어 놓고 아에 중복생기면 새로운 변수에다가 넣는 방식으로
해봤어요    그러다 대입 해서 해볼려 해보니  
        if( localStorage.getItem('cart') != null ){
             var newCart = localStorage.getItem('cart')
             newCart = JSON.parse(newCart);
             newCart.push(title);
             localStorage.setItem('cart',JSON.stringify(newCart));
이부분이 아에 필요 없어 지게 되더라구요 . 
그래서 버리고~  장바구니 페이지는 대충
  var jangBaGuNi = localStorage.getItem('cart')
       var newJangBaGuNi = JSON.parse(jangBaGuNi);
       console.log(newJangBaGuNi);
       for(let i = 0; i < newJangBaGuNi.length; i++){
        $('.container').append(`<h5>${newJangBaGuNi[i]}</h5>`)
       }
 이렇게 하고 일단 넘어 ... 가고싶습니다 다른거 강의 더 들으면서 생각날떄 마다 보완 수정 하겠습니다

[codingapple]

잘되면 잘한겁니다 
장바구니 array데이터에 상품명만 넣고 있는데 { name : '상품명', count : 1 } 이런거 보관하면 수량도 보관할 수 있겠군요

[오현우]

로컬 스트리지 보완 했씁니다 ^^ 1회독일떄는 맨 마지막 웹기능대회 그거를 그냥 글만 읽고 다시 1강으로 돌아가 2회독 했었는데요.
그게 패착이었네요 웹기능 거기에... 다 정답을 보여주셨는데 .. 제가 모르고 지나가버렸습니다 . 하루 종일 find,findindex 만 구글에서
보고 예제 만들고 다시해보고 콘솔로그로 계속 보면서 함수를 어떻게 써야될지 알겠습니다. 다른함수들도 인제 대충 어떻게 써야될지 
알 것 같습니다. 예전에는 구글에서 함수 찾아봐도 그걸 어떻게 쓰는지 잘 몰랐는데 지금은 알 것 같습니다 감사합니다.. ^^
var cart = [];
$('.buy').on('click',function(e){
  var title1 = $(e.target).siblings('h5').text();
  let proIndex = cart.findIndex((a) => { return title1 == a.title})
  if(proIndex == -1){
    cart.push({title : title1, count : 1});
  }else{
    cart[proIndex].count++;
  }
  localStorage.setItem('cart', JSON.stringify(cart));
  
  
  console.log(cart)
  
})
$('#more1').click(function(){
  localStorage.removeItem('cart');
  cart = [];
})

버튼 하나 더 만들어서 장바구니 비우는 버튼 만들었습니다. 계속 남아있어서 귀찮더라구요;
근데 products 요게 없으면 어차피 저거 구매카드도 없는거기 떄문에 h4. txt요소를 다시 가져와서 했지만.

var cart = [];

$('.buy').on('click',function(e){
  var btnTarget = e.target.dataset.id;
  let proIndex = cart.findIndex((a) => { return btnTarget == a.id})

  if(proIndex == -1){
    let jang = products.find((a) => { return btnTarget == a.id})
    jang.count = 1;
    cart.push(jang);
  }else{
    cart[proIndex].count++;
  }
  
  localStorage.setItem('cart', JSON.stringify(cart));
  console.log(cart);
})
$('#more1').click(function(){
  localStorage.removeItem('cart');
  cart = [];
})
products 있다고 생각하고 하나더 만들었습니다. 인제 응용도 안해본게 없어서 빠르게 3회독 하고 node.js 넘어가보도록 하겠습니당

[codingapple]

잘했읍니다

[글쓴이]

글