cookie
쿠키는 작은 데이터 파일로 사용자가 웹사이트를 방문을 기록할때 남는 간단한 파일이다. 브라우저가 종료되도 남아 있으나 쿠키에 expire값을 줘서 일정시간이 지난뒤에 쿠키가 삭제되게 할 수 있다.
이번 실습에선 expire 값을 실시간으로 볼 수 있게 출력하였으며 다른 사이트를 이용할때 팝업이 뜨면 하루동안 보지않기 같은 기능을 구현하였다.
- cookiepopup.html
<!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>Document</title>
<link rel="stylesheet" href="./cookiepopup.css" />
</head>
<body>
<div>
<p>남은 시간 : <span class="popup-time"></span></p>
</div>
<div class="popup-wrap">
<div class="popup">
<div class="popup-header">
<span class="popup-btn"></span>
</div>
<div class="popup-body">
<button class="event-btn">클릭</button>
</div>
</div>
</div>
</body>
<script src="./cookiepopup.js"></script>
</html>
- cookiepopup.css
.popup-wrap {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.4);
display: none;
}
.is-on {
display: block;
}
.popup-wrap .popup {
position: absolute;
width: 400px;
height: 600px;
background-color: white;
border-radius: 20px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.popup-wrap .popup .popup-btn {
width: 30px;
height: 30px;
margin: 10px;
display: block;
float: right;
position: relative;
}
.popup-wrap .popup .popup-btn::after,
.popup-wrap .popup .popup-btn::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(45deg);
height: 4px;
width: 100%;
background-color: black;
}
.popup-wrap .popup .popup-btn::before {
transform: translate(-50%, -50%) rotate(-45deg);
}
- cookiepopup.js
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);
popupOpen();
popupEvent.addEventListener("click", function () {
console.log("event");
// 쿠키 추가
setCookie("event-popup", true, 10);
location.reload();
});
// 쿠키 추가 ========================================================= //
function setCookie(name, value, time) {
let date = new Date();
date.setTime(date.getTime() + time * 1000);
let str = name + "=" + value + ";expires=" + date.toUTCString() + ";path=/";
let str2 = getCookieTime(str);
// 문자열로 데이터를 저장하는데 값이 여러개일 경우 배열이나 객체를 사용
// 문자열을 받아서 객체로 변환
document.cookie =
name +
"=" +
`{"value" : "${value}", "time" : "${str2}"}` +
";expires=" +
date.toUTCString() +
";path=/";
}
// 쿠키값이 없으면 팝업 작동
if (popupCookie != undefined) {
popupOpen();
}
function getCookie(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 == name) {
return unescape(y);
}
}
}
function getCookieTime(cookie) {
console.log(cookie);
// 쿠키 문자열을 배열로 변환
let str = cookie.split(";");
console.log(str);
let str2 = str.find(function (i) {
let temp = i.trim();
return temp.startsWith("expires=");
// trim 메소드 : 문자열 양끝 공백 제거
// startsWith 메소드 : 해당 문자로 시작하는지 확인 매개변수로 시작하는 문자열 전달
// let _bool = i.trim().startsWith("expires=");
// if (_bool) {
// return new Date()
// } else {
// return null;
// }
});
console.log(str2);
if (str2) {
let str3 = str2.trim();
console.log(str3);
// 쿠키의 시간을 가져와 Date 객체로 생성
return new Date(str3.slice(9));
} else {
return null;
}
}
function deleteCookie(name) {
document.cookie = name + "=; expires=Thu, 01 Jan 1999 00:00:10 GMT;";
}
// 시간이 차이나는 값 만들기
function times(time) {
// 밀리초로 생성
let day = Math.floor(time / (24 * 60 * 60 * 1000));
time %= 24 * 60 * 60 * 1000;
console.log(time);
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);
return day + "일 " + hour + "시간 " + min + "분 " + sec + "초";
}
// 비동기 함수
// setInterval() : 매초마다 동작하는 함수
let setTime = setInterval(() => {
let date2 = new Date();
// // 객체가 아닌 값이 들어옴
let timetag = document.querySelector(".popup-time");
if (popupCookie != undefined) {
let time = JSON.parse(popupCookie).time;
let date = new Date(time);
timetag.innerHTML = times(popupTime(date, date2));
} else {
timetag.innerHTML = "Time Over";
}
}, 1000);
function popupTime(date1, date2) {
return date1.getTime() - date2.getTime();
}
function times(time) {
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);
if (time <= 0) {
// setInterval()을 멈춤. 매개변수로 전달
clearInterval(setTime);
let timetag = document.querySelector(".popup-time");
timetag.innerHTML = "";
popupOpen();
}
return `${day}일 ${hour}시 ${min}분 ${sec}초`;
}
728x90
'JavaScript' 카테고리의 다른 글
| [Javascript] 슬라이드 만들기 (0) | 2023.03.27 |
|---|---|
| [Javascript] 구조분해할당 (0) | 2023.03.27 |
| [Javascript] localstorage를 활용한 todolist 만들기 (0) | 2023.03.27 |
| [Javascript] 마우스 관련 메소드를 활용한 상자 색 옮기기 (0) | 2023.03.24 |
| [Javascript] 생성자 함수와 자주쓰는 DOM, BOM 메소드 (0) | 2023.03.21 |