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

티스토리툴바