• Q&A
  • 회원가입
  • 로그인

[BOM] JS - Cookie (쿠키) 사용법 ★★★ - 쿠키 (설정・생성) / 쿠키 (읽기・얻기・가져오기) / 쿠키 (변경・삭제・제거)

6,193  

1. Cookie 정의

 

쿠키 : 컴퓨터에 작은 텍스트 파일로 저장된 데이터.

 


 

1.

웹 서버가 웹 페이지를 브라우저로 보내면 연결이 종료되고 서버는 사용자에 대한 모든 것을 잊어버림.

쿠키는 "사용자에 관한 정보를 기억하는 방법"이라는 문제를 해결하기 위해 고안됨.

 

2.

사용자가 웹 페이지를 방문하면 자신의 이름을 쿠키에 저장 가능.

다음에 사용자가 페이지 방문하면 쿠키는 자신의 이름을 "기억".

쿠키는 이름=값 쌍으로 저장되며, 각 이름=값 쌍은 ; (세미콜론)으로 구분.

(예) document.cookie = "username=Hz Sinbi; expires=Thu, 19 Dec 2019 12:00:00 UTC";

 

3.

브라우저가 서버에서 웹페이지를 요청하면 해당 페이지에 속하는 쿠키가 요청에 추가됨. 

이런 식으로 서버는 사용자에 대한 정보를 "기억"하는 데 필요한 데이터를 얻음.

 

4.

브라우저에서 로컬 쿠키 지원이 해제되어 있으면 아래 예제 중 어느 것도 작동 안 함. 

 

 


PS. 

 

크롬 경우 쿠키 저장 위치.

C:\Users\사용자ID\AppData\Local\Google\Chrome\User Data\Default\Cache

 

크롬 경우 쿠키 삭제 방법

Ctrl + Shift + Del 키

 

크롬 경우 쿠키 확인 방법

F12 키  >  Application  탭 >  Storage  그룹 >  Cookies

 

 

 

JS는 document.cookie 속성 사용해 쿠키 (생성/읽기/삭제) 가능.

 

 

2. Cookie 쿠키 생성

 

// 이름

document.cookie = "username=Hz Sinbi"; 

 

// 만료 날짜 (UTC 시간) 추가 가능. (기본값: 쿠키는 브라우저 닫힐 때 삭제됨.)

document.cookie = "username=Hz Sinbi; expires=Thu, 19 Dec 2019 12:00:00 UTC";

 

// 경로 매개변수 추가 가능. 쿠키가 속한 경로를 브라우저에게 알림. (기본값: 쿠키는 현재 페이지에 속함.)

document.cookie = "username=Hz Sinbi; expires=Thu, 19 Dec 2019 12:00:00 UTC; path=/";

 

 

 

3. Cookie 쿠키 읽기

 

var x = document.cookie; 

 


 

ps.

document.cookie 하나의 문자열로 모든 쿠키를 다음과 같이 반환.

cookie1=value; cookie2=value; cookie3=value;

 

 

 

4. Cookie 쿠키 변경

 

생성과 동일한 방법으로 기존 쿠키를 덮어쓰면 됨.

document.cookie = "username=Hz admin; expires=Thu, 19 Dec 2019 12:00:00 UTC; path=/"; 

 

 

 

5. Cookie 쿠키 삭제 (= 쿠키 제거)

 

쿠키 삭제할 때 쿠키값 지정 불필요. 단지, expires 매개변수를 지나간 날짜로 설정만 하면 됨.
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";

 


 

PS.

올바른 쿠키를 삭제하도록 쿠키 경로 정의 필요.

경로 미지정 시, 일부 브라우저 쿠키 삭제 실패.

 

 

 

6. Cookie 쿠키 문자열

 

1. 

document.cookie 속성은 일반 텍스트 문자열처럼 보이나 실제론 그렇지 않음.

document.cookie에 전체 쿠키 문자열 작성해도, 다시 읽을 때 이름-값 쌍만 볼 수 있음.

 

2.

쿠키 이름 다른 새 쿠키 설정 시, 오래된 쿠키를 안 덮어씀. 
새 쿠키가 document.cookie에 추가되므로, document.cookie 다시 읽으면 아래처럼 됨.

cookie1 = value; cookie2 = value;

 

3.

하나의 지정된 쿠키값 찾으려면, 쿠키 문자열에서 쿠키 값을 검색하는 JS 함수 작성 필요. 

 

 

 

7. Cookie 쿠키 예제

 

1. 

방문자 이름을 저장하는 쿠키 새성.

즉,

최초 방문 시 이름 입력 메세지 띄워 이름을 쿠키에 저장.

다음에 방문자가 같은 페이지 방문 시, 환영 메시지 띄움.


2.

3개의 함수 생성 : 쿠키값 (설정함/얻기/확인) 함수

 

 

 

7-1. Cookie 쿠키 설정 함수 (= 쿠키 생성 함수)

 

// (쿠키 이름, 쿠키 값, 만료일) 문자열을 담는 쿠키 변수 생성.

function setCookie(cname, cvalue, exdays) {

  var d = new Date();

  d.setTime(d.getTime() + (exdays*24*60*60*1000));

  var expires = "expires="+ d.toUTCString();

  document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";

 


[코드 의미]

 

위 함수의 매개 변수는 쿠키 이름 (cname), 쿠키 값 (cvalue), 쿠키 만료일수 (exdays).

이 함수는 쿠키 이름, 쿠키 값 및 만료 문자열을 함께 추가하여 쿠키를 설정.

 

 

 

7-2. Cookie 쿠키 얻기 함수 (= 쿠키 읽기 함수)

 

// 지정 쿠키의 값을 반환하는 함수 생성

function getCookie(cname) {

  var name = cname + "=";

  var decodedCookie = decodeURIComponent(document.cookie);

  var ca = decodedCookie.split(';');

  for(var i = 0; i <ca.length; i++) {

    var c = ca[i];

    while (c.charAt(0) == ' ') {

      c = c.substring(1);

    }

    if (c.indexOf(name) == 0) {

      return c.substring(name.length, c.length);

    }

  }

  return "";

 


[코드 의미]

 

쿠키 이름을 매개 변수 (cname)로 사용.

검색할 텍스트로 변수 (이름) 작성 (cname + "=").

쿠키 문자열을 디코딩하여 특수문자 (예 : '$')로 쿠키 처리.

세미콜론의 document.cookie를 ca (ca = decodedCookie.split ( ';'))라는 배열로 분할.

ca 배열 (i = 0; i <ca.length; i ++)을 반복하고 각 값 c = ca [i] 읽음.

쿠키가 발견되면 (c.indexOf (name) == 0) 쿠키 값 (c.substring (name.length, c.length) 반환.

쿠키를 찾을 수 없으면 "" 반환.

 

 

 

7-3. Cookie 쿠키 확인 함수 (= 쿠키 체크 함수)

 

function checkCookie() {

  var username = getCookie("username");

  if (username != "") {

   alert("잘 오셨어요. " + username + " 님");

  } else {

    username = prompt("이름을 입력해주세요.:", "");

    if (username != "" && username != null) {

      setCookie("username", username, 365);

    }

  }

 


[코드 의미]

 

마지막으로 쿠키가 설정되어 있는지 확인.

쿠키가 설정되면 인사말을 표시.

쿠키가 설정되어 있지 않으면 setCookie함수 호출해 사용자 이름 묻는 프롬프트 상자 표시하고,
365일 동안 사용자 이름 쿠키를 저장.

 

 

 

7-4. Cookie 종합 예제

 

<!DOCTYPE html>

<html>

<head>

<script>

function setCookie(cname,cvalue,exdays) {

  var d = new Date();

  d.setTime(d.getTime() + (exdays*24*60*60*1000));

  var expires = "expires=" + d.toGMTString();

  document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";

}


function getCookie(cname) {

  var name = cname + "=";

  var decodedCookie = decodeURIComponent(document.cookie);

  var ca = decodedCookie.split(';');

  for(var i = 0; i < ca.length; i++) {

    var c = ca[i];

    while (c.charAt(0) == ' ') {

      c = c.substring(1);

    }

    if (c.indexOf(name) == 0) {

      return c.substring(name.length, c.length);

    }

  }

  return "";

}


function checkCookie() {

  var user=getCookie("username");

  if (user != "") {

    alert("잘 오셨어요. " + user + " 님");

  } else {

     user = prompt("이름을 입력해 주세요.:","");

     if (user != "" && user != null) {

       setCookie("username", user, 30);

     }

  }

}

</script>

</head>


<body onload="checkCookie()"></body>


</html> 

 

결과보기

관련글 https://thereclub.tistory.com/59

 

 

Cookie 예제

 

<div class='notice'>알림</div>

<button onclick='delCookie();'>쿠키 삭제</button>


<script>

// 쿠키 읽기

let my_cookie = document.cookie;

let cookieCheck = my_cookie.indexOf('Hz');

let notice = document.querySelector('.notice');

if(cookieCheck > -1) {

    notice.style.display = 'none';

} else {

    notice.style.display = 'block';

}


// 쿠키 생성

let date = new Date();

date.setDate(date.getDate() + 7);

/*

let setCookie = '';

setCookie += 'CookieName = Hz;';

setCookie += 'expires = ' + date.toUTCString();

// 위 여러 줄로 된 코드를 아래처럼 한 줄로 표현 가능.

*/

let setCookie = `CookieName = Hz; expires = ${date.toUTCString()}`;

document.cookie = setCookie;


// 쿠키 삭제

function delCookie() {

    let date = new Date();

    date.setDate(date.getDate() - 1); // 이전 날짜로 설정.

    let setCookie = '';

    setCookie += 'CookieName = Hz;';

    setCookie += 'expires = ' + date.toUTCString();

    document.cookie = setCookie;

}

</script>

 

주의: cookie 설정 코드가 읽기 코드 앞에 위치하면 작동 X

 


찾아주셔서 감사합니다. Since 2012