⭐쿠키 데이터 = "변수=값;path=/;expires=" +date+ ";"
🔹document.cookie = 쿠키 데이터
🔹date는 지정하고 싶은 날짜까지
🔹document.cookie.indexOf("popup=event") -> '0' 반환
1. js09_popup.html에서 '쿠키'를 만들자!
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>pop up</title>
<style>
img{width:100%;}
#que1>div {float:left; width:50%;}
#que1>div:nth-child(2){text-align:right;}
</style>
</head>
<body>
<img src="../img/swisda.jpg" />
<div id="que1">
<div><input type="checkbox" id="chk" />하루 동안 안 보임</div>
<div><button id="closeoOk" onclick="setPopupClose()">Close</button></div>
</div>
<script>
function setPopupClose(){
//check박스의 체크유무 확인후
//input type 속성이 checked:true or false
var chkStatus = document.getElementById("chk").checked; //boolean반환
//체크 상태이면 cookie에 체크하였다는 정보를 기록
if(chkStatus){
//하루이므로 내일날짜와 시간
var date = new Date();
date.setDate(date.getDate() + 1); // 오늘 25일 + 1 = 26일이 들어가 있음
// 변수 = 값 저장위치, 쿠키에 저장해라 ->시간을 준다, 변수를 5월 25일3시 ~ 5월 26일 3시까지 남겨둬라
var cookieData = "popup=event;path=/;expires="+date+";";
document.cookie = cookieData;
}
window.close();
}
</script>
</body>
</html>✔check박스, 체크 유무 확인
2. COOKIE.html, 쿠키가 없거나 삭제시 팝업창이 뜬다!
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>COOKIE</title>
</head>
<!--문서의 모든 콘텐츠(images, script, css, etc)가 로드된 후 발생하는 이벤트이다. -->
<body onload = "showPopup()">
<h1>cookie를 이용한 팝업창 띄우기</h1>
<a></a>
<script>
/* js09_popup.html 사용, js -2page- document객체에 document.cookie
cookie: 사용자 컴퓨터에 기록 vs 세션은 서버에 저장
오늘 하루동안 보지않기 체크 후 cloe를 하면 안나와야됨
*/
document.title = "쿠키 연습 중";
function showPopup(){
//쿠키에 popup=event 값으로 가진 쿠키가 없을 때
// string 함수
var cookie = document.cookie;
var idx = cookie.indexOf("popup=event") //idx가 -1이라는 의미는 쿠키가 없다는 의미
if(idx == -1){
//쿠키가 없으면 뜨고
window.open("js09_popup.html", "win", "width=450px, height=360px, left=200px")
}
//window.open(파일, 팝업창 이름, 옵션)
}
document.write(document.cookie)
</script>
</body>
</html>3. 쿠키 목록이 생겼다. 즉 이 팝업창을 하루는 보이지 않도록 기억한다.
풀스택eDot