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>
Blossom Dress
가격 : 70000
Springfield Shirt
가격 : 50000
Black Monastery
가격 : 60000
강의 출처: JavaScript 입문과 웹 UI개발
코딩애플 온라인 강좌 - 개발자도 단기완성!
단연 NO1 강사님의 NO.1 강의 역시나 명강입니다. IT 업계의 대치동 NO1. 강사같은 엄청난 강의력. 코딩애플님의 강의는, 엄청나게 기초적인 것부터 가르치는 듯 보이지만, 실제로 다루는 깊이는 절
codingapple.com
반응형