JavaScript 입문과 웹 UI개발(30)-장바구니 기능과 localStorage

2022. 10. 10. 20:04카테고리 없음

반응형

list.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <title>Bootstrap demo</title>
    <!--부트스트랩 css-->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" 
    rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" 
    crossorigin="anonymous">
    
    

    <!--제이쿼리-->
    <script
    src="https://code.jquery.com/jquery-3.6.1.min.js"
    integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ="
    crossorigin="anonymous"></script>
</head>
  <body>
   
    <div class="container">
  <div class="row">

  </div>
  <button class="btn btn-danger" onclick="cheaper()" >가격순 정렬</button>
  <button class="btn btn-danger" onclick="titlebca()" >상품명 정렬</button>
   <button class="btn btn-danger" onclick="underSix()" >6만원 이하 상품만 보기</button>
<button class="btn btn-danger" onclick="getmore()" >더보기</button>
</div> 
      

<script>
// 브라우저에 안에 몰래 데이터를 저장할 수 있는 공간이 있다.
// 브라우저에서 개발자도구를 켜서 Application에 들어가면 Storage가 있다.
// -Local Storage
// -Session Storage
// -IndexedDB
// -Cookies 
// -Cache Storage
//local Storage와 Session Storage는 key:value 형태로 저장 가능
//IndexedDB는 구조화된 대용량 데이터 저장시에 사용한다
//쿠키는 유저의 인증정보를 저장하고 싶을때 보통 로그인 정보를 저장할 때 많이 쓴다
//Cache Storage는 html css js 파일 저장하는 곳
//localStorage와 sessionStorage 용량은 5MB로 문자/숫자만 저장가능
// array나 object는 집어넣으려고 하면 강제로 문자로 바꿔준다
// 문자만 5BM는 엄청나게 많은 양을 저장할 수 있는거다
//localStorage는 사이트 재접속해도 유지되고 
//sessionStorage는 사이트 나가면 자동삭제된다

//장바구니 넣기 버튼을 누르면 localStorage에 넣는 걸 해볼거다
//localStorage 저장방법
//localStorage.setItem('key', 'value') 와 같은 형태로 저장한다
localStorage.setItem('이름', 'jo')
//localStorage에서 값 가져오는 방법
//localStorage.getItem('key');
console.log(localStorage.getItem('이름')); //jo
//localStorage에 있는 데이터 삭제 방법
//localStorage.removeItem('key')
localStorage.removeItem('이름');
console.log(localStorage.getItem('이름')); //null
//localStorage에 array를 저장하면
localStorage.setItem('num',[1,2,3,4]);
//array가 깨지고 문자인 '1,2,3,4' 로 저장된다
//이렇게 array나 object를 강제로 localStorage에 넣으면
// 깨져서 배열은 []가 빠진 문자로 들어가고 object는 [object Object]로 들어가니 array와 object를 localStorage에 저장하려면
// 문자 취급을 받는 json으로 바꾸면 깨짐 없이 저장 가능하다
// json으로 바꾸는 방법은
//JSON.stringify(array나 object) 와 같은 방법을 사용하면 된다.
// 그럼 배열이나 object는 깨지지 않지만 문자열로 저장이 된다. 
var arr33=[1,2,3,4,66];
var obj={name:'genius'};
var newArr33=JSON.stringify(arr33);
var newObj=JSON.stringify(obj);
localStorage.setItem('num1',newArr33);
console.log(localStorage.getItem('num1'));//[1,2,3,4,66]
localStorage.setItem('num2',newObj);
console.log(localStorage.getItem('num2'));//{"name":"genius"}
//json으로 저장했기에 localStorage에서 값을 가져와도 문자열이 된다. 
//가져온 문자열을 다시 array나 object로 바꾸는 방법이 있다
// JSON.parse(array나 object) 
var realArray=JSON.parse(localStorage.getItem('num1'));
console.log(realArray); //진짜 배열로 출력됨
var realObject=JSON.parse(localStorage.getItem('num2'));
console.log(realObject); //진짜 Object로 출력됨

//위의 방법은 모두 localStorage를 사용하는 방법이였는데
//session을 사용하는 방법은 위의 localStorage에서 local을 session으로 바꾸면 끝이다
// sessionStorage.setItem('key','value')
// sessionStorage.getItem('key')







    var cnt=0; //더보기 버튼을 누른 횟수
        var products = [
          { id : 0, price : 70000, title : 'Blossom Dress' },
          { id : 1, price : 50000, title : 'Springfield Shirt' },
          { id : 2, price : 60000, title : 'Black Monastery' }
        ];

    //배열을 파라미터로 넣어주면 배열에 있는 상품들을 출력해주는 함수
    function productList(data){
            //요청 성공시 실행되는 함수
           data.forEach((v)=>{
            //받아온 배열을 forEach로 각 데이터를 추가해준다
            $('.row').append(`<div class="col-sm-4">
            <img src="https://via.placeholder.com/600" class="w-100">
            <h5 class='title' >${v.title}</h5>
            <p>가격 : ${v.price}</p>
            <button class='buy'>장바구니추가</button>
        </div>`  );
        })
    }

    

    //가격순 정렬 버튼 누르면 작동하는 함수
    function cheaper(){
    
    //상품의 가격 오름차순으로 정렬
    products.sort(function(a,b){
        return a.price-b.price;
        
    })
    //오름차순으로 바뀌었지만 화면에 적용이 안돼있다.
    //html을 비웠다가 다시 넣어주라
    $('.row').html('');
    productList(products);
    }

    //상품명으로 정렬 버튼 누르면 작동하는 함수
    function titlebca(){
    
    //상품의 제목 내림차순으로 정렬
    products.sort(function(a,b){
        if(a.title<b.title)  return 1;
        if(a.title>b.title)  return -1;
        if(a.title=b.title) return0;
    })
    //내림차순으로 바뀌었지만 화면에 적용이 안돼있다.
    //html을 비웠다가 다시 넣어주라
    $('.row').html('');
    productList(products);
    }


    //6만원 이하 상품만 보기 버튼 눌렀을때 작동하는 함수
    function underSix(){
        
      var newProducts=products.filter(function(a){
            return a.price<=60000;
        });
    //html을 비웠다가 다시 넣어주라
    $('.row').html('');
    productList(newProducts);
    }



    //1,2,3 번째 상품 출력
    productList(products);



      // https://codingapple1.github.io/js/more1.json   여기로 get 요청을 보내면 
      // 4,5,6번째 상품 3개를 array로 받을 수 있다

      //더보기 버튼을 한번더 누르면
      // https://codingapple1.github.io/js/more2.json   여기로 get 요청을 보내면 
      // 7,8,9번째 상품 3개를 array로 받을 수 있다

      //더보기 버튼을 눌렀을때 get 요청을 통해 상품정보를 가져오는 함수
      function getmore(){
        cnt++;
      if(cnt==1){//버튼을 한번 눌렀을때만 작동하게 한다
        //요청보냄
        $.get('https://codingapple1.github.io/js/more1.json')
        .done(function(data){
            productList(data);
        })
        }
       else if(cnt==2){// 버튼을 두번째 눌렀을때만 작동하게 한다
        //요청보냄
        $.get('https://codingapple1.github.io/js/more2.json')
        .done(function(data){
            productList(data);
        })

        //더보기 버튼을 눌러도 더이상 상품이 없으므로 더보기 버튼을 안보기게함 
        $('.btn').css('display', 'none');
      }
      }



      //숙제 1
// 위에 장바구니 버튼 누르면 localStroage에 배열로 추가 되는 기능
//힌트1) sibling 알아봐라
//힌트2) localStorage에 뭔가 있을때랑 없을때 저장방법이 다름

$('.row').on('click','.buy',function(e){
//append로 추가된 버튼은  $('.buy').on('click',function(){}) 을 해도 클릭이벤트 함수가 작동 안한다.
//해결 방법은 append를 하는 <div> 태그에 on해서 안에있는 버튼의 클릭 이벤트를 처리하면 된다.


  var basketArray=[]// 장바구니에 추가 되는 상품을 이 배열에 넣어준다
  var productName=$(e.target).siblings('.title').html();//이벤트가 발생한 버튼의 siblings 중에서 상품명이 있는 <h5 class='title'>의 html 값 

  console.log('추가되는 상품명 >>'+productName)
  console.log('localStorage basket 비어있나 확인>>'+localStorage.getItem('basket'))

  //기존에 localStorage에 저장된 정보가 없는경우(장바구니가 비어있는 경우)
  if(localStorage.getItem('basket')==null||localStorage.getItem('basket')==''){
    basketArray.push(productName);//배열에 상품명 추가
    var newBasketArray=JSON.stringify(basketArray);//json의 형태로 바꿔준것을 변수에 담음
    localStorage.setItem('basket',newBasketArray);//json 형태의 정보를 localStorage에 넣어줌
  }else{
    //기존에 localStorage에 들어있는 상품이 있는 경우
    var nowBasketArray=JSON.parse(localStorage.getItem('basket'));//localStorage에 있는 json형태의 자료를 array로 바꿔줌
    nowBasketArray.push(productName);//array에 상품명 추가
    var storeBasketArray=JSON.stringify(nowBasketArray);// json형태로 변환해줌
    localStorage.setItem('basket',storeBasketArray);//localStorage의 json으로 변환한 데이터를 넣어줌
  }
})

//숙제 2
//cart.html 방문시 localStorage에서 값을 가져와 장바구니 목록을 나타내라




      
</script> 


<!--거의 모든 자바스크립트 라이브러리는 <body> 끝나기전에 넣는거 권장-->    
<!--부트스트랩 JS-->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js" 
    integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" 
    crossorigin="anonymous"></script>
  </body>
</html>

cart.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>Document</title>

     <!--제이쿼리-->
     <script
     src="https://code.jquery.com/jquery-3.6.1.min.js"
     integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ="
     crossorigin="anonymous"></script>
</head>
<body>

  <div class="basketList">

  </div>
  
  
  <script>
     var getBasket=localStorage.getItem('basket');//localStorage에서 장바구니 목록 가져옴
    var arrayBasketList=JSON.parse(getBasket); //배열로 바꿈

    //출력
     arrayBasketList.forEach((a) => {
                $('.basketList').append(`<div>${a}</div> `);    
            });
    
  </script>
</body>
</html>
Bootstrap demo
Blossom Dress

가격 : 70000

Springfield Shirt

가격 : 50000

Black Monastery

가격 : 60000

 

강의 출처: JavaScript 입문과 웹 UI개발

https://codingapple.com/

 

코딩애플 온라인 강좌 - 개발자도 단기완성!

단연 NO1 강사님의 NO.1 강의 역시나 명강입니다. IT 업계의 대치동 NO1. 강사같은 엄청난 강의력. 코딩애플님의 강의는, 엄청나게 기초적인 것부터 가르치는 듯 보이지만, 실제로 다루는 깊이는 절

codingapple.com

 

반응형