//로컬 스토리지 사용법
localStorage.setItem('이름','jieun'); // 자료 저장하는 법
localStorage.getItem('이름'); //자료 꺼내는법
localStorage.removeItem('이름');//자료 삭제하는법array/object를 로컬스토리지에 저장하면 강제로 문자로 바꿔서 저장됩니다.
그래서 자료가 깨지고 그럴 수 있습니다.
그래서 약간 편법같은건데 array/object를 JSON으로 바꾸면 문자취급을 받기 때문에 안전하게 로컬스토리지에 저장할 수 있습니다.
JSON은 그냥 따옴표친 array/object입니다.
//localStorage.setItem('num', [1,2,3]); //배열에 깨져서 나온다
//배열을 깨지지 않고 저장할땐
var arr = [1,2,3];
var newArr = JSON.stringify(arr); // 배열을 지켜줌
localStorage.setItem('num',newArr)
//배열을 깨지지 않고 꺼내쓸땐
var 꺼낸거 = localStorage.getItem('num');
꺼낸거 = JSON.parse(꺼낸거);
console.log(꺼낸거);
구매버튼을 카드만드는 코드에 각각 써주었어요.
<button class ='buy'>구매</button>products.forEach((a, i)=>{ //2.products갯수만큼 카드생성
var 템플릿 =
`<div class="col-sm-4">
<img src="https://via.placeholder.com/600" class="w-100">
<h5>${products[i].title}</h5>
<p>가격 : ${products[i].price}</p>
<button class ='buy'>구매</button>
</div>`;
$('.row').append(템플릿)이런식으로요.
그다음, 카드하단 구매버튼을 누르면 상품명이 저장되는 코드를 짜려고 해요오
//1. 카드하단 구매버튼을 누르면,
//2. 지금누른버튼을 윗윗글자를 가져와서
//3. localStorage에 저장하기
$('.buy').click(function(e){ //e를 꼭넣어줘야
var title = $(e.target).siblings('h5').text();
//localStorage.setItem('cart',[title]) => 배열이 깨짐
localStorage.setItem('cart',JSON.stringify([title]))
});구매버튼을 누르면 카드에 담기는 코드를, 상단에 각 구매버튼을 누르는 함수 안에다가 넣어줍니다.
자바스크립트는 코드를 한 줄씩 읽기 때문에
6만원이하 버튼을 누름 → 카드 펼쳐짐 → 구매버튼 누름 → 상품명 로컬스토리지에 담김 (이렇게 안하니까 구매버튼을 눌러도 아무것도 안뜨더라...)
이 순서로 실행되어야 하기 때문이죠.
하지만, 이렇게 하니 상품명 갯수가 1개로 유지되면서 상품명만 바뀌는 문제가 생겼습니다.
우리는 구매 버튼을 누르면, 상품명이 누적되는 것을 원하잖아요?
그래서 조건문을 쓰도록 하겠습니다.
만약, 기존에 cart라는 키가 있다면, 수정해주세요.
아니라면, 그냥 setitems 로 상품을 추가해주세요.
$('.buy').click(function(e){ //e를 꼭넣어줘야
var title = $(e.target).siblings('h5').text();
//localStorage.setItem('cart',[title]) => 배열이 깨짐
//localStorage.setItem('cart',JSON.stringify([title])) => 상품명 갯수가 1개로 유지되면서 상품명만 바뀜
if(이미 cart라는 항목이 있으면){
수정하기 ~~~
}else{
localStorage.setItem('cart',JSON.stringify([title]))
}
});
그렇다면 이미 cart라는 항목이 있는지 어떻게 알까요?
콘솔에 한번 찍어보기로 하죠~
먼저 이렇게 cart 가 로컬스토리지에 등록되어 있는 경우에 콘솔을 찍으면 어떻게 될까요?
예쁘게 잘 출력이 됩니다.
그런데 만약 로컬스토리지 기록을 삭제한 상태에서 출력한다면?
null 값이 나옵니다. 그러면 이미 카트라는 항목이 있으면을 if(localStorage.getItem('cart') != null) 라고 쓸수 있겠죠
$('.buy').click(function(e){ //e를 꼭넣어줘야
var title = $(e.target).siblings('h5').text();
//localStorage.setItem('cart',[title]) => 배열이 깨짐
//localStorage.setItem('cart',JSON.stringify([title])) => 상품명 갯수가 1개로 유지되면서 상품명만 바뀜
if(localStorage.getItem('cart') != null){
var 꺼낸거 = JSON.parse(localStorage.cart); // 배열로 예쁘게 바꿔줌
꺼낸거.push(title); //push()는 기존배열에 항목을 추가할 때
localStorage.setItem('cart',JSON.stringify(꺼낸거));
}else{
localStorage.setItem('cart',JSON.stringify([title]));
}
});
그럼 이렇게 구매버튼을 여러번 누르면, 상품명이 누적해서 담기게 됩니다~
모든 버튼에 적용되게 끔 함수를 넣어주세요~
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<title>Hello, world!</title>
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
</head>
<body>
<div class="container">
<div class="row">
</div>
</div>
<div class ="container">
<button class = "btn btn-danger" id = 'more'>더보기</button>
</div>
<div class ="container my-3">
<button class = "btn btn-danger" id = 'price'>가격순 정렬</button>
</div>
<div class="container my-3">
<button class="btn btn-danger" id="sort1">다나가순정렬</button>
</div>
<div class="container my-3">
<button class="btn btn-danger" id="filter">6만원이하</button>
</div>
<script>
function 카드만들기(data){ //data 값은 달라질 수 있으니 변수를 넣어주도록 하자
console.log(data)
//카드 레이아웃이 3개 생성, 일단 1개부터 만들어보도록 하자, i는 0부터 끝까지 돌음
data.forEach(function(item,i){
var 템플릿 =
`<div class="col-sm-4">
<img src="https://via.placeholder.com/600" class="w-100">
<h5>${data[i].title}</h5>
<p>가격 : ${data[i].price}</p>
<button class ='buy'>구매</button>
</div>`;
$('.row').append(템플릿)
});
$('.buy').click(function(e){ //e를 꼭넣어줘야
var title = $(e.target).siblings('h5').text();
//localStorage.setItem('cart',[title]) => 배열이 깨짐
//localStorage.setItem('cart',JSON.stringify([title])) => 상품명 갯수가 1개로 유지되면서 상품명만 바뀜
if(localStorage.getItem('cart') != null){
var 꺼낸거 = JSON.parse(localStorage.cart); // 배열로 예쁘게 바꿔줌
꺼낸거.push(title); //push()는 기존배열에 항목을 추가할 때
localStorage.setItem('cart',JSON.stringify(꺼낸거));
}else{
localStorage.setItem('cart',JSON.stringify([title]));
}
});
}
let count = 0; // let 을 함수밖으로 뺏을때와 그렇지 않을때의 차이점이 뭘까?
//버튼을 누르면 get 요청으로 데이터 가져옵시다
$('#more').on('click',function(){
count = count + 1;
if(count === 1){
$.get('https://codingapple1.github.io/js/more1.json').done(function(data){
카드만들기(data);
});
}
else if(count === 2){
$.get('https://codingapple1.github.io/js/more2.json').done(function(data){
카드만들기(data);
});
}
});
var products = [
{id:0, price: 70000, title: 'Blossom Dress'},
{id:1, price: 50000, title: 'Springfield Shirt'},
{id:0, price: 70000, title: 'Black Monastery'}
];
//Q.버튼을 누르면 product 안의 데이터를 가격순으로 정렬?
// = 버튼을 누르면 product 안의 데이터를 html 로 생성
$('#price').click(function(){
products.sort(function(a,b){ //a,b는 product 안의 데이터들임. 가격만 추린것이 x
return a.price - b.price ;//{} 오브젝트가 아닌 오브젝트 속 숫자들(price)에 대해 빼야함
});
console.log(products);
//콘솔창 뿐 아니라 html 도 가격순으로 정렬하고 싶음
// html 싹 비워주고 새로만듦
$('.row').html(''); //카드 3개 있던 div내용 제거
카드만들기(products);
})
$('#sort1').click(function(){
products.sort(function(a, b){
if (a.title < b.title) {
return 1
} else {
return -1
}
});
$('.row').html(''); //카드 다 없애주셈
카드만들기(products);
});
//필터버튼을 클릭했을때, 6만원 이하인 상품을 필터로 거른다.
//그후, 거른 배열을 기준으로 forEach를 사용해서 카드를 만든다.
$('#filter').click(function(){
var newProducts = products.filter(function(item){
return item.price <= 60000 //filter 은 원본배열 변경 x, sort는 원본배열 변경o
})
console.log(newProducts);
$('.row').html(''); //카드 다 없애주셈
카드만들기(newProducts);
});
</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>
</html>'Javascript' 카테고리의 다른 글
| 간혹쓰는 switch 조건문에 대하여 (0) | 2023.04.26 |
|---|---|
| 스크롤 위치에 따라 변하는 애니메이션 (0) | 2023.03.21 |
| sort, map, filter 함수를 사용하여 정렬 버튼 만들기 (0) | 2023.03.21 |
| Ajax 요청 (상품 더보기 버튼 만들기) (0) | 2023.03.21 |
| 자바스크립트로 html 다루기 (0) | 2023.03.20 |
