728x90
1. 코드
쿠키를 이용해서 광고창의 하루동안 보지않기를 클릭하면 만료일을 +1일로 설정해줘서 그동안 광고창이 안나오게함
세션을 이용해서 로그인을 했다면 창을 끄기전까지 로그인상태 유지하도록 함
<!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>
</head>
<link rel="stylesheet" href="index.css" />
<body>
<canvas class="canvas"></canvas>
<div id="loginPage">
<div id="wholeWrapper">
<div>
<label for="">아이디</label>
<input type="text" id="inputId" />
</div>
<div>
<label for="">비밀번호</label>
<input type="text" id="inputPw" />
</div>
<button id="loginBtn">로그인</button>
<div id="subdiv">
<button id="signUp">회원가입</button>
<button id="findIdPw">아이디/비밀번호 찾기</button>
</div>
</div>
<div id="loginNav">
<div id="navTop">아이디 슬라이드창</div>
<button id="logout">로그아웃</button>
</div>
</div>
<div id="adPage">
<div class="adSection">이것은 광고입니다</div>
<div id="close">
<div id="dontLook">
하루동안 보지않기
<input type="checkbox" id="checkbox" />
</div>
<div id="closeAd">닫기</div>
</div>
</div>
</body>
<script src="app.js"></script>
<script>
let createCookie = function (name, value = "광고On", time = 1) {
let date = new Date();
date.setTime(date.getTime() + time * 24 * 60 * 60 * 1000);
document.cookie =
name + "=" + value + ";expires=" + date.toUTCString() + ";";
};
let getCookie = function (name) {
let value = document.cookie.match("(^|;) ?" + name + "=([^;]*)(;|$)");
return value ? value[2] : null;
};
//온로드 됬을때 로그인상태라면
window.onload = function () {
if (sessionStorage.getItem("login") == 1) {
wholeWrapper.style.display = "none";
loginNav.style.display = "block";
navTop.innerHTML = `${sessionStorage.getItem(
"loggedin"
)}님 환영합니다!`;
}
};
//로그인 버튼 클릭
loginBtn.onclick = function () {
if (!getCookie(inputId.value)) {
createCookie(inputId.value);
}
if (getCookie(inputId.value) == "광고On") {
adPage.style.display = "flex";
}
wholeWrapper.style.display = "none";
loginNav.style.display = "block";
sessionStorage.setItem("login", 1);
sessionStorage.setItem("loggedin", inputId.value);
navTop.innerHTML = `${sessionStorage.getItem("loggedin")}님 환영합니다!`;
inputPw.value = "";
};
//하루동안 광고 안보기 클릭
closeAd.onclick = function () {
adPage.style.display = "none";
if (checkbox.checked) {
createCookie(inputId.value, "광고Off");
}
checkbox.checkbox = false;
};
//로그아웃 버튼 클릭
logout.onclick = function () {
sessionStorage.setItem("login", 0);
wholeWrapper.style.display = "block";
loginNav.style.display = "none";
};
</script>
</html>728x90
'개발 > html, css, js' 카테고리의 다른 글
| [30일 챌린지 Day-8] 무지개 canvas (0) | 2022.08.09 |
|---|---|
| [JS] 쿠키와 세션 (0) | 2022.08.09 |
| [30일 챌린지 Day-7] some,every,find,findIndex (0) | 2022.07.26 |
| [30일 챌린지 Day-6] 검색, json 활용 (0) | 2022.07.26 |
| [30일 챌린지 Day-5] flex, classname 추가 활용 (0) | 2022.07.25 |