cookie를 생성해서 팝업 창을 오늘 하루 보지 않게 하기
index.js
const express = require("express");
// cookie-parser 모듈 불러오기
const cookieParser = require("cookie-parser");
const app = express();
const port = 8080;
app.set("view engine", "ejs");
// 익스프레스 객체에 미들웨이 등록
app.use(cookieParser('1234'));
app.get("/practice", (req, res) => {
res.render("practice48");
})
app.listen(port, () => {
console.log("Server Port : ", port);
})practice48.ejs
팝업 창은 부트스트랩 모달을 이용하였다.
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script>
// close버튼 누르면 실행되는 함수
function close_btn() {
let modal_checkbox = document.querySelector("input");
// 만약 체크박스에 체크가 되어있다면
if (modal_checkbox.checked) {
// 쿠키 "today=no"로 설정해주기
document.cookie = "today=no; expires=Sat, 14 Aug 2022 00:00:00 GMT; path=/";
}
}
</script>
</head>
<body>
<!-- 부트스트랩 이용 -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">안내</h5>
</div>
<div class="modal-body">
<h4>인터넷익스플로러(IE) 지원 종료 안내</h4>
<p>인터넷익스플로러(IE) 서비스 지원이 2022년 6월 15일 종료됨에 따라 안전하고 원활한 LH청약센터 이용을 위해 크롬, 사파리, 엣지 등의 웹브라우저를 이용해주시기 바랍니다.</p>
</div>
<div class="modal-footer">
<div style="margin-right: 280;">
<input type="checkbox"> 오늘 그만보기
</div>
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal" onclick="close_btn()">Close</button>
</div>
</div>
</div>
</div>
</body>
<script>
// flag에 true 저장해주기
let flag = true;
// 쿠키가 여러 개 있으면 ';' 로 구분되어 문자열로 document.cookie에 저장되기 때문에 ';' 로 나눠서 배열에 저장해주었다.
let cookieArr = document.cookie.split(";");
for (let i in cookieArr) {
// cookieArr[i]는 cookieArr의 i번째 인덱스. 즉, 하나의 쿠키 정보
// 하나의 쿠키는 "이름=값"의 형태로 되어 있어서 "="으로 나누어 배열에 저장해주었다.
let cookie = cookieArr[i].split("=");
// 그럼 cookie는 ["이름", "값"]으로 구성되어 있음
// 콘솔에 찍어보니 키 앞에 띄어쓰기가 추가되어 있어서 cookie[0] == " today"로 조건을 걸어주었다.
if (cookie[0] == " today" && cookie[1] == "no") {
// 만약 쿠키의 이름이 " today"이고 값이 "no"이면 flag를 false로 설정해준다.
flag = false;
// 그리고 for문을 탈출한다. 왜냐하면 이미 원하는 쿠키를 찾았기 때문에 그 다음 쿠키는 찾아볼 필요가 없다.
break;
}
}
// 만약 flag가 true라면. 즉, "today=no" 쿠키가 존재하지 않는다면
if (flag == true) {
$(document).ready(function() {
// 모달을 띄어준다.
$("#exampleModal").modal("show");
});
}
</script>
</html>
예전 글은 다크모드로 봐야 잘 보일 수도 있습니다.
오 하셨군요! ㅎㅎ sese님 코드 참고해서 저도 한 번 도전해봅니다 👍