[JS] 쿠키 생성(저장), 불러오기

쿠키란 키와 값이 들어있는 데이터 조각으로 이름, 값, 파기 날짜, 경로 정보를 가집니다. 서버와 클라이언트에서 모두 저장, 사용 가능하며 일정 기간 데이터를 유지할 수 있습니다. 저장된 쿠키의 확인은 웹브라우저 - 웹 개발 도구 - 저장소에서 확인할 수 있습니다.

 

 

쿠키 생성 방법

 

document.cookie = "Name=Value(값);Expires=날짜;Domain=도메인;Path=경로;Secure";

 

데이터를 저장, 읽는 데 사용하는 Name - Value 속성은 꼭 지정해야 합니다. Expires는 쿠키 파기날짜를 지정하는 속성인데 지정되지 않으면 브라우저 종료 시 쿠키가 삭제됩니다. 

Domain 속성을 비우면 현재 도메인의 경로로 자동 입력됩니다. 페이지 요청과 일치해야 접근 가능합니다.

Path 속성을 비우면 현재 도메인의 경로로 자동 입력되며 특정 경로(폴더명)을 설정합니다. '/'로 설정하면 도메인 모든 곳은 곳에서 접근이 가능합니다.

Secure 속성을 지정하면 해당 쿠키는 SSL을 사용해서면 요청할 수 있습니다. (출처)

*SSL : 3자가 보증해주는 디지털 인증서. SSL(Secure Socket Layer) 프로토콜은 처음에 Netscape사에서 웹서버와 브라우저(클라이언트) 사이의 보안을 위해 만들었습니다. 클라이언트는 인증서 정보가 신뢰할 수 있는지 검증을 거친 후 다음 절차를 수행하게 됩니다. HTTPS는 SSL 프로토콜 위에서 돌아가는 프로토콜입니다. (출처)

 

// 변수를 선언
var date = new Date();
date.setDate(date.getDate() + 7);

var willCookie = "";
willCookie += "CookieName=Value;";
willCookie += "expires=" + date.toUTCString();

// 쿠키에 넣는다.
document.cookie = willCookie;

 

 

 

 

쿠키 읽어오기

 

   alert(document.cookie);

 

document 객체의 cookie 속성을 출력하면 됩니다. 여러 쿠키를 한 번에 출력하므로 개별적인 쿠키를 읽으려면 반복문 처리 등의 과정이 필요합니다. 아래는 5개의 쿠키가 생성되는데요. 

 

// 변수를 선언한다.
var date = new Date();
date.setDate(date.getDate() + 7);

// 5번을 반복한다.
for(var i = 0; i < 5; i++) {

  var willCookie = "";
  willCookie += "Name" + i + "=Value";
  willCookie += "Expires=" + date.toUTCString();

  // 쿠키를 집어넣는다.
  document.cookie = willCookie;
}

// 출력한다.
alert(document.cookie);

 

이제 쿠키의 Value 속성을 추출하여 Name 속성으로 분해해 출력해보겠습니다. 우선 문자열을 세미콜론(;)을 사용해 분해합니다. 분해하면 Name=Value 형태의 문자열로 분해됩니다. 

 

// 변수를 선언한다.
var name = "Name4";
var cookies = document.cookie.split(";");

alert(cookies);


// 쿠키를 추출한다.
for(var i in cookies) {

	if(cookies[i].search(name) != -1) {

		alert(cookies[i].replace(name + "=", ""));

	// ※ 참고 : 특정 브라우저 양끝 공백 문제 발생시 대응
	// alert(cookies[i].replace(name + "=", "").replace(/^\S\S*/, "").replace(/^\S\S*$/, ""));
	}
}

 

 

 

 

 

쿠키 제거하기

 

// 변수를 선언한다.
var date = new Date();
date.setDate(date.getDate() - 1);

var willCookie = "";
willCookie += "CookieName=Value;";
willCookie += "Expires=" + date.toUTCString();

// 쿠키를 집어넣는다.
document.cookie = willCookie;

// 출력한다.
alert(document.cookie);

 

제거는 Expires 속성을 현재 이전 날짜로 설정하면 됩니다. (출처)

 

 

 

 

쿠키를 활용한 예제

사용자가 입력한 내용을 저장해두었다가, 현재 뿐만 아니라 다음에도 그 내용을 보여준다
새로고침을 해도 입력한 내용은 저장한 쿠키에 의해 보여진다.

A 쿠키를 읽어온다

• 1 저장된 게 없으면 입력칸을 보여준다
• 2 저장된 게 있으면 저장된 내용을 보여준다
• 3 저장된 게 있어도 입력을 원하면 입력칸을 보여주고, 내용을 수정하여 저장한다
• 4 입력을 하지 않고 종료하면 그 이전 값을 둔다. 이전 값이 없으면 "-"를 표시한다

B 입력값이나 표시할 값을 시각적으로 표시한다

 

//