<!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>Cookie Creat & Check</title>
<style>
.notice {
position: absolute;
padding: 20px;
border: 1px solid #ccc;
background-color: #F8A1A4;
color: white;
top: 100px;
left: 100px;
}
</style>
</head>
<body>
<div class="notice">Notice PopUp</div>
<button class="delBtn">쿠키 지우기</button>
</body>
<script>
let currentCookie = document.cookie
let cookieCheck = currentCookie.indexOf("ABC");
if (cookieCheck > -1) {
document.querySelector(".notice").style.display = "none"
}
else {
document.querySelector(".notice").style.display = "block"
}
let date = new Date(); //현재 날짜 반환
//변수.날짜 지정 변수 .setDate(새로운 날짜)
date.setDate(date.getDate() + 7); //오늘부터 7일 이후의 날짜
let setCookie = '';
setCookie += 'CookieName = ABC;';
setCookie += 'expires =' + date.toUTCString();
document.cookie = setCookie;
function deleteCookie() {
console.log("버튼 실행");
let date = new Date(); //현재 날짜 반환
date.setDate(date.getDate() - 1); //생성한 쿠키를 오늘 날짜 이전으로 바꿔줌
let setCookie = '';
setCookie += 'CookieName = ABC;';
setCookie += 'expires =' + date.toUTCString();
document.cookie = setCookie;
}
const delBtn = document.querySelector(".delBtn");
delBtn.addEventListener("click", deleteCookie);
</script>
</html>'웹 개발 > 바닐라js' 카테고리의 다른 글
| [따라만들기] number auto animation (0) | 2022.03.02 |
|---|---|
| [따라만들기] multiple slider (0) | 2022.02.20 |
| [따라만들기] Hover Animation (0) | 2022.02.20 |
| [따라만들기] lightbox (0) | 2022.02.20 |
| [따라만들기] tabs menu (0) | 2022.02.20 |
[따라만들기] cookie popup