Cookie 다루기

cookie는 사용자의 컴퓨터에 물리적인 형태로 저장되는 경량의 텍스트 자료
name=value 형식으로 저장됨
쿠키 생성시 쿠키가 유지되는 만료기한을 설정가능
name=value; path=/; expires=만료시간;
문자열.indexOf(찾을 문자열) : 전체 문자열에서 찾을 문자열이 위치해 있는 순서값 반환
전체문자열에 찾고자 하는 문자열이 없으면 -1 반환 (반환값이 -1인지 아닌지가 중요)

쿠키 활용 예제:

index

<body>
  <!-- 쿠키값 제어 버튼 (테스트 용도) -->
  <nav>
    <button>OPEN</button>
    <button>VIEW COOKIE</button>
    <button>DELETE COOKIE</button>
    <button>CREATE COOKIE</button>
  </nav>

  <!-- 쿠키 팝업 -->
  <aside>
    <div class="con"></div>
    <div class="controls">
      <p><input type="checkbox" id="ck"><label for="ck">오늘하루 보지 않기</label></p>
      <button>close</button>
    </div>
  </aside>
</body>

css

* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}
nav {
  margin: 100px;

  button {
    border: none;
    background: gray;
    padding: 15px 40px;
    font: bold 1rem/1 "arial";
    color: white;
    cursor: pointer;
    border-radius: 7px;
  }
}

//쿠키 팝업 스타일
aside {
  width: 600px;
  padding: 50px;
  background: linear-gradient(45deg, violet, hotpink);
  margin: 100px;
  border-radius: 10px;
  box-shadow: 10px 10px 20px rgba(255, 105, 180, 0.276);

  .con {
    min-height: 100px;
  }
  .controls {
    display: flex;
    justify-content: space-between;

    label {
      font: 1rem/1 "맑은 고딕";
      color: white;
    }
    button {
      cursor: pointer;
      border: none;
      background: transparent;
      color: white;
      font-size: 1rem;
    }
  }
}

js

const [open, view, del, create] = document.querySelectorAll("nav button");
const popup = document.querySelector("aside");
const ck = popup.querySelector("#ck");
const close = popup.querySelector('button');

let isCookie = document.cookie.indexOf("popup=done");
popup.style.display = (isCookie < 0) ? "block" : "none";

// 팝업 이벤트
open.addEventListener('click', ()=>{
  popup.style.display = 'block';
  ck.checked = false;
});

// 쿠키 생성
create.addEventListener('click', ()=>{
  setCookie("popup", "done", 1);
  alert("오늘부터 1일동안 유지되는 쿠키 생성");
});

//쿠키 확인
view.addEventListener('click', ()=>{
  console.log(document.cookie);
})

// 쿠키 삭제
del.addEventListener('click', ()=>{
  setCookie("popup", "done", -1);
  alert("popup=done 쿠키 삭제");
});


close.addEventListener('click', ()=>{
  popup.style.display = 'none';
  console.dir(ck);
  // 닫기 버튼 클릭시 체크박스가 활성화 되어 있으면 쿠키 생성
  if(ck.checked) setCookie("popup", "done", 0);

});

//쿠키 생성 함수
function setCookie(name, value, expires){
  //오늘 날짜 기준으로 시간 정보값
  let today = new Date();
  //오늘 날짜에서 expires만큼 더해진 날짜 정보
  let duedate = today.getDate() + expires;
  //위에서 생성된 만료 기한을 today라는 시간 객체정보에 세팅
  today.setDate(duedate);

  //실제 브라우저에 파라미터 정보값을 조합해서 문자열 형태로 쿠키 생성해서 등록
  document.cookie = `${name}=${value};path=/;expires=${today.toString()}`
}

Cookie 다루기

쿠키 활용 예제:

index

css

js

댓글 쓰기