예시코드
let popupBtn = document.querySelector(".popup-btn");
let popupEvent = document.querySelector('.event-btn');
let popupCookie = getCookie("event-popup");
function popupOpen(){
let popup = document.querySelector('.popup-wrap');
if(popup.classList.contains("is-on")){
popup.classList.remove('is-on');
}else{
popup.classList.add('is-on');
}
}
popupBtn.addEventListener("click",popupOpen);
popupEvent.addEventListener("click",function(){ // eventbtn 누를때 발동
console.log('이벤트');
// 쿠키 추가
// 하루동안 유지되는 쿠키 생성.
setCookie("event-popup",true,10);
})
// 문자로 저장되는구나. 쿠키, 로컬스토리지 둘다
// 코딩을하면서 데이터를 저장할때 문자열로 저장한다.
console.log(typeof getCookie("event-popup"))
// 하루동안 팝업 안보이기
// 쿠키값이 없으면 팝업이 작동하게 팝업이 뜨게
// 쿠키값이 없으면 undefined
if(popupCookie == undefined)
{
popupOpen();
}
function getCookie(c_name)
{
var i,x,y,ARRcookies=document.cookie.split(";");
for (i=0;i<ARRcookies.length;i++)
{
x=ARRcookies[i].substr(0,ARRcookies[i].indexOf("="));
y=ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1);
x=x.replace(/^\s+|\s+$/g,"");
if (x==c_name)
{
return unescape(y);
}
}
}
function setCookie(c_name,value,time){
let date = new Date(); //Date라는 생성자 객체안에 다양한 메소드있음 그걸 new를 통해서 메모리를 새로할당한후 date에 연결시켜줌
date.setTime(date.getTime() + time * 1000);
let str = c_name+"="+value+";expires="+date.toUTCString()+";path=/";
let str2 = getCookieTime(str);
// 문자열로 데이터를 저장하는데
// 값이 여러개일경우
// 배열이라던지 객체를 사용
// 여러가지의 값을 사용해야하기때문에 객체의 모양으로 문자열을 전달하고
// 문자열을 받아서 객체로 변환하여 사용하자.
console.log(getCookieTime(c_name+"="+value+";expires="+date.toUTCString()+";path=/"));
document.cookie = c_name+"="+`{"value" : "${value}", "time" : "${str2}"}`+";expires="+date.toUTCString()+";path=/"
let value2 = getCookie("event-popup");
console.log(JSON.parse(value2));
}
function getCookieTime(cookie){
// 쿠키 문자열을 받아서 배열로 변환
let str = cookie.split(';');
let str2 = str.find(function(i){
let temp = i.trim();
return temp.startsWith('expires=');
})
if(str2){
let str3 = str2.trim();
console.log(str3);
// 쿠키의 시간을 받아서 시간의 정보들을 다루는
// Date객체를 만들어줬다.
return new Date(str3);
}else{
return null;
}
}
// trim 메소드 : 문자열 양끝의 공백을 제거
let a = " a b ";
console.log(a);
console.log(a.trim());
// startsWith 메소드 : 해당 문자로 시작하는지 여부
// 매개변수로 시작하는 문자열 전달해주면 된다.
let b = "abcd";
console.log(b.startsWith("abc"))
// 시간의 차이를 구해서 값을 받아보자
// 밀리초를 받아서 시간이 얼마나 남은건지 확인하는 함수
// 시간계산을 할때 언제 시간이 만료되는지 알고있으면 되는거죠?
// 지금 시간의 정보를 가지고있는 Date객체를 만들어서
// 미래 시간의 밀리초와 지금 만든 Date객체의 밀리초를 빼면
// 차이값이 나오는데 그 차이값(밀리초)를 가지고 날짜와 시간과 분,초 이렇게 나타내주기만 하면 된다.
// times함수로 밀리초를 가지고 날짜 시간 분 초가 얼마나 남은건지.
let dateTemp = 1000;
// 비동기 함수 setTimeout이 함수는 매개변수로 전달한 시간이후에 실행되는 함수.
// setTimeout(() => {
// // 1초뒤에 실행
// }, 1000);
// 비동기 함수
// 매초마다 동작하는 함수를 만들어보자
// 정한 시간마다 동작하는 함수
// 매개변수로 전달한 시간마다 동작한다.
// let date1 = new Date();
// date1.setTime(date1.getTime() + 100000);
// let time = JSON.parse(popupCookie).time;
// let date = new Date(time);
//console.log(date);
// setInterval 제거 방법
let setTime = setInterval(() => {
let date2 = new Date();
// // 값이 들어온것 객체가 아니고
// let time = date1.getTime() - date2.getTime();
// // 1초마다 실행
// times(time);
let timeTag = document.querySelector('.popup-time');
if(popupCookie != undefined)
{
let time = JSON.parse(popupCookie).time;
let date = new Date(time);
console.log(date);
console.log(date2);
console.log(popupTime(date,date2));
timeTag.innerHTML = times(popupTime(date, date2)); // date는 시간초가 더해진 미래의 시간이고 date2는 현재의 시간이다
//popupTime은 첫번째 매개변수에서 두번째 매개변수를빼준다
}else{
timeTag.innerHTML = "시간끝";
}
}, 1000);
function popupTime(date1,date2) {
return date1.getTime() - date2.getTime();
}
function times(time){
// let sec = Math.floor(time / (24*60*60*1000));
// let min = Math.floor(time / (60*60*1000));
// console.log(min);
let day = Math.floor(time / (24 * 60 * 60 * 1000));
// 받아온 시간에서 날짜가 하루 단위가 있으면 나눠서 값을 넣어주고
// 일단위를 빼고
time %= (24 * 60 * 60 *1000);
let hour = Math.floor(time / (60 * 60 * 1000));
// 시간단위를 빼고
time %= (60 * 60 * 1000);
let min = Math.floor(time /(60 * 1000));
// 분단위를 다빼고
time %= (60 * 1000)
// 남은 초
let sec = Math.floor(time / 1000);
console.log(day);
console.log(hour);
console.log(min);
console.log(sec);
if(time < 0)
{
// 지울 Interval 함수 매개변수로 전달하면된다.
clearInterval(setTime);
let timeTag = document.querySelector('.popup-time');
timeTag.innerHTML = "";
}
return `${day}일 ${hour}시 ${min}분 ${sec}초`;
}
//
잘라서 이해하기
- popupBtn 변수는 팝업을 띄우는 버튼을, popupEvent 변수는 이벤트 버튼을 선택합니다.
- popupOpen() 함수는 팝업창을 열고 닫는 기능을 구현합니다.
- popupBtn 버튼에 클릭 이벤트가 발생하면 popupOpen() 함수가 실행됩니다.
- 쿠키 처리
- getCookie() 함수는 쿠키 값을 가져오는 기능을 구현합니다.
- setCookie() 함수는 쿠키 값을 저장하는 기능을 구현합니다.
- popupCookie 변수는 쿠키에서 가져온 팝업을 띄울지 말지 결정하는 값입니다.
- 팝업 띄우기
- popupOpen() 함수는 팝업창을 열고 닫는 기능을 구현합니다.
- popupEvent 버튼에 클릭 이벤트가 발생하면 setCookie() 함수가 실행되고, 하루 동안 쿠키 값을 유지합니다.
- popupCookie 값이 없으면 popupOpen() 함수가 실행되어 팝업창이 뜹니다.
chat gpt가 작성한 정리다.
팝업 버튼을 클릭하면
let popupEvent = document.querySelector('.event-btn');
popupEvent.addEventListener("click",function(){ // eventbtn 누를때 발동
console.log('이벤트');
// 쿠키 추가
// 하루동안 유지되는 쿠키 생성.
setCookie("event-popup",true,10);
})
event -btn 클래스를가진 div에 접근할수있는 변수 popupevent 만든다.
addEventListener 클릭이벤트가 들어왔을때 function익명함수가 실행된다.
setCookie("event-popup",true,10); 매개변수에 eventpopup true 10 이들어간다.
그럼 setCookie를 보자
setCookie
function setCookie(c_name,value,time){
let date = new Date(); //Date라는 생성자 객체안에 다양한 메소드있음 그걸 new를 통해서 메모리를 새로할당한후 date에 연결시켜줌
date.setTime(date.getTime() + time * 1000);
let str = c_name+"="+value+";expires="+date.toUTCString()+";path=/";
let str2 = getCookieTime(str);
// 문자열로 데이터를 저장하는데
// 값이 여러개일경우
// 배열이라던지 객체를 사용
// 여러가지의 값을 사용해야하기때문에 객체의 모양으로 문자열을 전달하고
// 문자열을 받아서 객체로 변환하여 사용하자.
console.log(getCookieTime(c_name+"="+value+";expires="+date.toUTCString()+";path=/"));
document.cookie = c_name+"="+`{"value" : "${value}", "time" : "${str2}"}`+";expires="+date.toUTCString()+";path=/"
let value2 = getCookie("event-popup");
console.log(JSON.parse(value2));
}
// 함수 선언: 쿠키를 설정할 때 실행되는 함수 function setCookie(c_name,value,time){ let date = new Date(); // 현재 시간을 기준으로 Date 객체 생성 date.setTime(date.getTime() + time * 1000); // 현재 시간에 time(초)을 더하여 쿠키 만료 시간 설정
javascriptCopy code
// 쿠키에 저장할 문자열 생성
let str = c_name+"="+value+";expires="+date.toUTCString()+";path=/";
let str2 = getCookieTime(str);
// 쿠키에 객체 형태의 데이터를 저장
document.cookie = c_name+"="+`{"value" : "${value}", "time" : "${str2}"}`+";expires="+date.toUTCString()+";path=/"
// 쿠키에 저장된 값을 출력하여 확인
let value2 = getCookie("event-popup");
console.log(JSON.parse(value2));
의문
매개변수로 받아온 이름 벨류 시간을 str 변수에 하나의 문자열로 생성한다.
처음 키와 벨류값이 “=” 으로 구분되는이유는 쿠키의 형태가 저런식이기때문이다 원래
alert( document.cookie ); // cookie1=value1; cookie2=value2;…
document.cookie는 name=value쌍으로 구성되어있고, 각 쌍은 ;로 구분합니다. 이때, 쌍 하나는 하나의 독립된 쿠키를 나타냅니다.
다시 =이 나오기전까지는 하나의 쿠키로 보는게맞나?
20230324쿠키 이해2
let popupBtn = document.querySelector(
www.notion.so
'언어 > js' 카테고리의 다른 글
| 20230328 스프레드 연산자. (0) | 2023.07.20 |
|---|---|
| 20230327 구조분해 할당, swipe (0) | 2023.07.20 |
| 20230323 나머지 매개변수 IIFE즉시실행함수 (0) | 2023.07.20 |
| 20230316 메서드 this callback (0) | 2023.07.20 |
| 20230315 필터 (0) | 2023.07.20 |