[Web/JS] Cookie

Cookie

서버가 사용자의 웹 브라우저에 전송하는 작은 데이터 조각입니다. 브라우저는 그 데이터 조각들을 저장해 놓았다가, 동일한 서버에 재 요청 시 저장된 데이터를 함께 전송합니다. 쿠키는 두 요청이 동일한 브라우저에서 들어왔는지 아닌지를 판단할 때 주로 사용합니다.

쿠키 사용 목적

1. 세션 관리(Session management)

→ 서버에 저장해야 할 로그인, 장바구니, 게임 스코어 등의 정보 관리

2. 개인화(Personalization)

→ 사용자 선호, 테마 등의 세팅

3. 트래킹(Tracking)

→ 사용자 행동을 기록하고 분석하는 용도

예제

1. common.js 파일

/**
 * Cookie
 *     document.cookie 로 쿠키 생성
 *     옵션
 *     expires=날짜정보(만료일자);
 *     path=주소
 *     domain=특정도메인(naver.com) // 만약 naver.com일경우 다른 사이트에서는 쿠키를
 *                                    얻을 수 없음. 설정안할시 현재도메인으로 설정
 *     secure=secure // 설정할 경우 https 프로토콜에서만 접근가능
 *
 *     ex)
 *     document.cookie = 'userId=id001; expires=만료일자; path=/; domain=domain; secure;';
 *
 * @format
 */

//setCookie(key, value, exdays)
// setCookie ('팝업이름', 'Y', 1)
function setCookie(key, value, exdays) {
  const expireDate = new Date();

  expireDate.setTime(expireDate.getTime() + exdays * 1000 * 60 * 60 * 24);
  document.cookie = `${key}=${value}; expire=${expireDate}; path=/;`;
}
//getCookie(key)
function getCookie(key) {
  let popupName = key;
  let cookieArr = document.cookie.split(';');
  console.log(cookieArr);
  let result = '';
  result += cookieArr
    .map(function (item) {
      let dataArr = item.split('=');
      if (dataArr[0] == key) return dataArr[1];
    })
    .join();
  return result;
}

2. cookie_main.html

<!-- @format -->

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>cookie</title>
  </head>
  <body>
    <h1>http 쿠키</h1>
    - 텍스트 형태의 작은 기록 정보 파일 <br />
    - 브라우저에 사이트마다 저장된다. <br />

    <script src="js/common.js" type="text/javascript"></script>
    <script type="text/javascript">
      let isPopupVisible = getCookie('myPopup');
      if (isPopupVisible != 'Y') {
        open(
          'cookie_myPopup.html',
          '팝업',
          'width=400, height=400, top=100, left=100, scrollbar=no'
        );
      }
    </script>
  </body>
</html>

3. cookie_myPopup.html

<!-- @format -->

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>내 팝업</title>
  </head>
  <body>
    <h1>팝업</h1>
    <label>
      <input type="checkbox" id="closeCheck" />
      오늘 하루 보이지 않기
    </label>
    <button type="button" id="closeBtn">닫기</button>

    <script src="js/common.js" type="text/javascript"></script>
    <script type="text/javascript">
      const $closeBtn = document.getElementById('closeBtn');

      $closeBtn.addEventListener('click', function () {
        const $closeCheckEle = document.getElementById('closeCheck');
        console.log($closeCheckEle.checked);
        let isChecked = $closeCheckEle.checked;
        // 체크가 되어 있다면 쿠키 생성
        if (isChecked) {
          setCookie('myPopup', 'Y', 1);
        }
        close();
      });
    </script>
  </body>
</html>

'코딩 공부 > JavaScript' 카테고리의 다른 글

[JS] JSON (0)	2022.11.23
[JS] JQuery (0)	2022.11.14
[JS] DOM 객체 이벤트 (0)	2022.11.07
[JS] DOM 조작 (0)	2022.11.02
[JS] DOM 노드탐색 (0)	2022.11.02