• 로그인
  • 장바구니에 상품이 없습니다.

home2 게시판 JavaScript, TS 게시판 localstorage

localstorage

10 글 보임 - 1 에서 10 까지 (총 20 중에서)
  • 글쓴이
  • #59539

    망고미
    참가자
    안녕하세요 선생님 localStorage에 담아서 장바구니에 상품명을 보여주고싶습니다.
    array.forEach로 배열 갯수만큼 파란색 코드을 추가하고싶은데 타입에러가 뜹니다..
    어떤 문제가 있는걸까요?
    
    #59544

    망고미
    참가자
          <script>
            let cart_products = localStorage.getItem('cart');
            console.log(cart_products)
            cart_products.forEach((a,i)=>{
              var cart_date=`<tr>
                <th scope="row">1</th>
                <td>Mark</td>
                <td>Otto</td>
                <td>@mdo</td>
                <td>Mark</td>
                <button scope="col">X</button>
              </tr>`;
              $('.table-group-divider').append(cart_date)
              })
          </script>
    #59556

    codingapple
    키 마스터
    JSON을 array로 변환해서 .forEach붙입시다
    #59569

    망고미
    참가자
    네 선생님 JSON을 array로 변환하여 .forEach를 붙이니 갯수만큼 잘 출력되었습니다.
    저는 object로 localStorage에 저장하여 장바구니에 추가하는 방식으로 구현하고자하는데요.
    localStorage에 잘못 넣고 있는거 같은데 어떤 부분을 수정하면될까요?
    
    
    
    #59571

    망고미
    참가자
    제 생각엔 노란부분이 파란부분으로 변경되어야할거같습니다..
    
                document.getElementsByClassName("buy")[i].addEventListener('click',function(e){
                  var local_id = $(e.target).siblings('h4').text();
                  var local_title = $(e.target).siblings('h5').text();
                  var local_charge = $(e.target).siblings('h6').text();
                  var num = 1;
                  var local_cart_product=`{'상품번호':${local_id},'상품명':${local_title},'가격':${local_charge},'수량':${num}}`
                  console.log(local_cart_product)
                  if(localStorage.getItem('cart')!=null){
                    var new_data = JSON.parse(localStorage.cart);
                    //localStorage에 값이 있으면?
                    if(new_data.includes(local_cart_product)){
                      return false
                    }else{
                      new_data.push(local_cart_product);
                      localStorage.setItem('cart',JSON.stringify(new_data))
                    }
                  }
                  else {
                    localStorage.setItem('cart',JSON.stringify([local_cart_product]));
                  }
    
    bold처리한 부분을 잘못 구현했을까요..?! 힌트 주세요 선생님,,
    #59624

    codingapple
    키 마스터
    object에 변수넣고 싶으면 굳이 빽틱이랑 ${} 넣을 필요 없이 그냥 변수명 넣으면 됩니다
    #59663

    망고미
    참가자
    네 선생님 도움으로 수정했습니다. 그런데 이미 상품이 있을경우 return false를하고 똑같은 상품이 없을경우
    push를 하는코드를 작성했는데,,, return부분에서 잘못 구현한걸까요?
    
    
    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Store</title>
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
        <link rel="stylesheet" href="store.css">
        <script
        src="https://code.jquery.com/jquery-3.6.0.min.js"
        integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
        crossorigin="anonymous"
      ></script>
    </head>
      </head>
      <body>
        <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
            <div class="container-fluid">
              집꾸미기
              <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
              </button>
              <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                  <li class="nav-item">
                    Home
                  
                  <li class="nav-item">
                    스토어
                  
                  <li class="nav-item">
                    시공견적
                  
                  <li class="nav-item">
                    장바구니
                  
                
                <form class="d-flex " role="search">
                  <input class="form-control me-2" type="text" id="search" onkeyup="filter()" placeholder="원하는 품목을 입력하세요" aria-label="Search">
                  <button class="btn btn-outline-success" type="submit">Search</button>
                </form>
              </div>
            </div>
          </nav>
          <div class="container">
            <div class="row product-list">
              <!-- <div class="col-md-3">
              < img src="">
              <h4>상품명 : </h4>
              <p>가격 : </p>
            </div> -->
            </div>
          </div>
          <script>
      var products=[
      {
        "id": 0,
        "title": "식기세척기",
        "brand": "세척나라",
        "photo": "./images/pr1.jpg",
        "price": 10000
      },
      {
        "id": 1,
        "title": "원목 침대 프레임",
        "brand": "침대나라",
        "photo": "./images/pr2.jpg",
        "price": 20000
      },
      {
        "id": 2,
        "title": "천연 디퓨저 세트",
        "brand": "향기나라",
        "photo": "./images/pr3.jpg",
        "price": 30000
      },
      {
        "id": 3,
        "title": "시원한 서큘레이터",
        "brand": "바람나라",
        "photo": "images/pr4.jpg",
        "price": 40000
      },
      {
        "id": 4,
        "title": "1800 거실장 시리즈",
        "brand": "리바트",
        "photo": "images/pr5.jpg",
        "price": 123000
      },
      {
        "id": 5,
        "title": "원룸거실장",
        "brand": "이케아",
        "photo": "images/pr6.jpg",
        "price": 35000
      },
      {
        "id": 6,
        "title": "초등학생 의자",
        "brand": "시디즈",
        "photo": "images/pr7.jpg",
        "price": 17900
      },
      {
        "id":7,
        "title": "다용도 접이스툴(L)",
        "brand": "LOVING HOME",
        "photo": "images/pr8.jpg",
        "price": 9900
      }
    ]
    products.forEach((a,i)=>{
              var count=0
              var Data=`
              <div class="card listinner" style="width: 20%;" id="drag1" draggable="true" ondragstart="drag(event)">
                <img class="card-img" src="${products[i].photo}" alt="...">
                <div class="card-body">
                  <h4 class="card-id">${products[i].id}</h4>
                  <h5 class="card-title">${products[i].title}</h5>
                  <p class="card-brand">${products[i].brand}</>
                  <h6 class="card-price">${products[i].price.toLocaleString()+'원'}</h6>
                  <button class="add btn btn-primary buy" data-id="${products[i].id}">담기</button>
                  <button class="good">💗<span class='good_number'>${count}</span></button>
                </div>
              </div>`;
              $('.product-list').append(Data)
                document.getElementsByClassName("buy")[i].addEventListener('click',function(e){
                  var local_id = $(e.target).siblings('h4').text();
                  var local_title = $(e.target).siblings('h5').text();
                  var local_charge = $(e.target).siblings('h6').text();
                  var num = 1;
                  var local_cart_product={'상품번호':local_id,'상품명':local_title,'가격':local_charge,'수량':num}
                  if(localStorage.getItem('cart')!=null){
                    var new_data = JSON.parse(localStorage.cart);
                    //localStorage에 값이 있으면?
                    if(new_data.includes(local_cart_product)){
                      return false
                    }else{
                      new_data.push(local_cart_product);
                      localStorage.setItem('cart',JSON.stringify(new_data))
                    }
                  }
                  else {
                    localStorage.setItem('cart',JSON.stringify([local_cart_product]));
                  }
                  })
                  //좋아요 하트를 클릭하면
                  document.querySelectorAll('.good')[i].addEventListener('click',function(){
                    count++;
                    document.querySelectorAll('.good_number')[i].innerHTML=count
                  })
                  /*
                document.getElementsByClassName("buy")[i].addEventListener('click',function(e){
                  var local_title = $(e.target).siblings('h5').text();
                  if(localStorage.getItem('cart')!=null){
                    var new_data = JSON.parse(localStorage.cart);
                    //localStorage에 값이 있으면?
                    if(new_data.includes(local_title)){
                      return false
                    }else{
                      new_data.push(local_title);
                      localStorage.setItem('cart',JSON.stringify(new_data))
                    }
                  }
                  else {
                    localStorage.setItem('cart',JSON.stringify([local_title]));
                  }
                  })*/
            })
                  //document.querySelectorAll('.add')[i].addEventListener('click',()=>{alert("장바구니에 추가 하겠습니까?")})})
                  //document.querySelectorAll('.add')[i].addEventListener('click',()=>{console.log(products[i].id)})})
                function filter(){
                  let seacrch = document.getElementById("search").value.toLowerCase();
                  let listinner = document.querySelectorAll('.listinner')
                  for (let i=0; i<=listinner.length; i++){
                    title = listinner[i].getElementsByClassName('card-title');
                    if(title[0].innerHTML.toLowerCase().includes(seacrch)){
                      listinner[i].style.display='flex'
                    }else{
                      listinner[i].style.display='none'
                    }
                  }
                }
                  
          </script>   
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
      </body>
    </html>
     
    #59696

    codingapple
    키 마스터
    array of objects안에서 같은 object가 있는지 찾고싶으면 includes 말고 다른걸 써봅시다
    #59743

    망고미
    참가자
    선생님 findIndex 값 -1을 찾을까 하다가 조건문을 써봤는데 원하는대로 구현이 안됩니다 ..
    
              $('.product-list').append(Data)
                document.getElementsByClassName("buy")[i].addEventListener('click',function(e){
                  var local_id = $(e.target).siblings('h4').text();
                  var local_title = $(e.target).siblings('h5').text();
                  var local_charge = $(e.target).siblings('h6').text();
                  var num = 1;
                  var local_cart_product={'상품번호':local_id,'상품명':local_title,'가격':local_charge,'수량':num}
                  if(localStorage.getItem('cart')!=null){
                    var new_data = JSON.parse(localStorage.cart);
                    //localStorage에 값이 있으면?
                    //조건을 만족하는 값이 없는 경우, -1을 출력
                      if(new_data.상품번호 == local_cart_product.상품번호){
                        console.log('같은게 있습니다.');
                        return false;
                      }
                      else{
                      new_data.push(local_cart_product);
                      localStorage.setItem('cart',JSON.stringify(new_data))
                    }
                  }
                  else {
                    localStorage.setItem('cart',JSON.stringify([local_cart_product]));
                  }
                  })
                  //좋아요 하트를 클릭하면
                  document.querySelectorAll('.good')[i].addEventListener('click',function(){
                    count++;
                    document.querySelectorAll('.good_number')[i].innerHTML=count
                  })
    #59786

    codingapple
    키 마스터
    new_data는 array자료일 것 같은데 점찍을 순 없을듯요 findIndex 써서 찾읍시다
10 글 보임 - 1 에서 10 까지 (총 20 중에서)
  • 답변은 로그인 후 가능합니다.

About

현재 월 700명 신규수강중입니다.

  (09:00~20:00) 빠른 상담은 카톡 플러스친구 코딩애플 (링크)
  admin@codingapple.com
  이용약관, 개인정보처리방침
ⓒ Codingapple, 강의 예제, 영상 복제 금지
top

© Codingapple, All rights reserved. 슈퍼로켓 에듀케이션 / 서울특별시 강동구 고덕로 19길 30 / 사업자등록번호 : 212-26-14752 온라인 교육학원업 / 통신판매업신고번호 : 제 2017-서울강동-0002 호 / 개인정보관리자 : 박종흠