쿠키(Cookie)
- 쿠키(Cookie)는 웹 서버가 클라이언트의 웹 브라우저에 저장하는 작은 데이터 조각이다.
- 이 데이터는 클라이언트와 서버 간의 상호작용을 추적하고 클라이언트의 상태를 기억하는 데 사용된다.
- 쿠키는 클라이언트의 로컬 컴퓨터에 텍스트 파일 형태로 저장되며, 웹 페이지를 방문할 때 웹 서버로부터 전송되고, 웹 브라우저에 의해 관리된다.
- 쿠키는 일정 기간 동안 지속되며, 만료일이 지나면 자동으로 삭제될 수 있다.
쿠키 사용 목적
1) 세션 관리: 쿠키를 사용하여 사용자의 세션을 식별하고, 로그인 상태를 유지하거나 세션 데이터를 저장할 수 있다.
2) 개인화: 사용자의 선호 설정, 언어 설정 등을 저장하여 맞춤화된 사용자 경험을 제공할 수 있다.
3) 트래킹 및 분석: 쿠키를 사용하여 사용자의 웹 활동을 추적하고, 방문한 페이지, 광고 클릭 등의 정보를 수집하여 분석할 수 있다.
4) 장바구니 저장: 쇼핑 웹 사이트에서는 쿠키를 사용하여 사용자의 장바구니에 추가한 상품을 저장할 수 있다.
쿠키는 기본적으로 클라이언트 측에서 관리되므로 보안과 개인 정보 보호 측면에서 주의해야 한다.
중요한 개인 정보를 포함하는 쿠키는 암호화되거나 서버 측에서 관리하는 세션 쿠키와 같은 안전한 방식으로 처리되어야 하며 사용자의 동의를 받아 쿠키를 사용하고 관리해야 한다.
쿠키를 저장, 사용, 삭제하는 기능을 가진 코드 예제
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
</head>
<body>
<h1>쿠키(Cookie)</h1>
<hr>
<form name="cookieForm">
아이디 : <input type="text" name="id">
<button type="button" id="saveBtn">입력 아이디 저장</button>
<button type="button" id="useBtn">저장 아이디 사용</button>
<button type="button" id="removeBtn">저장 아이디 삭제</button>
</form>
<script type="text/javascript">
//클라이언트에 쿠키를 저장(변경)하는 함수
// => 쿠키에는 필요한 정보를 이름과 값으로 묶어서 저장(이름=값)
// => 쿠키에 필요한 정보를 ;를 이용해 구분하여 쿠키에 여러개 저장 가능
// => 쿠키의 필수 정보로 쿠키명과 쿠키값을 묶어 저장
// => 쿠키의 선택 정보로 적용범위, 도메인, 지속시간 등을 저장 - 선택 정보를 저장하지 않을 경우 기본값 사용
function setCookie(name, value, path, expires) {
var sc="";//쿠키를 저장하기 위한 변수
//쿠키변수에 쿠키명과 쿠키값을 묶어서 저장
// => 쿠키값은 영문자, 숫자, 일부 특수문자만 저장 가능
// => 영문자, 숫자, 일부 특수문자를 제외한 문자는 부호화 처리하여 저장
sc+=name+"="+encodeURIComponent(value)+";";
//쿠키변수에 path 이름으로 쿠키의 적용범위를 묶어서 저장
sc+="path="+path+";";
//클라이언트의 현재 날짜와 시간이 저장된 Date 객체 생성
var date=new Date();
//Date.setDate(number) : Date 객체에 저장된 날짜와 시간 중 일을 변경하는 변경하는 메소드
date.setDate(date.getDate()+expires);
//쿠키변수에 expires 이름으로 쿠키의 지속시간을 묶어서 저장
//date.toUTCString() : Date 객체에 저장된 날짜와 시간을 협정 세계시(UTC)의 문자값을
//변환하여 반환하는 메소드
sc+="expires="+date.toUTCString()+";";
//document.cookie : 쿠키를 저장하기 위한 객체
document.cookie=sc;//클라이언트에 쿠키 저장
}
//클라이언트에 저장된 쿠키의 쿠키값을 반환하는 함수
// => 클라이언트에 저장된 쿠키 중 매개변수로 전달받아 이름의 쿠키값 반환
function getCookie(name) {
//쿠키에 저장된 정보를 ; 문자값으로 분리하여 변수에 저장
var gc=document.cookie.split(";");//변수에 Array 객체 저장
for(i=0;i<gc.length;i++) {
//Array 객체의 요소값(쿠키정보)을 = 문자값으로 분리하여 첫번째 요소값(이름)을
//매개변수로 전달받은 값(쿠키명)과 비교하여 같은 경우
if(gc[i].split("=")[0] == name) {
//두번째 요소값(쿠키값)을 반환
return gc[i].split("=")[1];
}
}
//매개변수로 전달받은 이름의 쿠키값이 없는 경우 null 반환
return null;
}
//[입력 아이디 저장] 버튼을 클릭한 경우 호출되는 이벤트 처리 함수 등록
// => 입력태그의 입력값(아이디)를 반환받아 클라이언트의 쿠키로 저장
document.getElementById("saveBtn").onclick=function() {
var id=cookieForm.id.value;//입력태그의 입력값을 변수에 저장
if(id=="") {//입력값이 없는 경우
alert("아이디를 입력해 주세요.");
return;
}
//입력값을 클리이언트의 쿠키값으로 하루동안 저장
setCookie("id", id, "/", 1);
//입력태그의 입력값 초기화
cookieForm.id.value="";
}
//[저장 아이디 사용] 버튼을 클릭한 경우 호출되는 이벤트 처리 함수 등록
// => 클라이언트에 저장된 쿠키값을 반환받아 입력태그의 입력값으로 출력
document.getElementById("useBtn").onclick=function() {
var id=getCookie("id");
if(id==null) {
alert("쿠키에 저장된 아이디가 없습니다.");
return;
}
//입력태그의 입력값으로 변수값 저장 - 입력값 변경
cookieForm.id.value=id;
}
//[저장 아이디 삭제] 버튼을 클릭한 경우 호출되는 이벤트 처리 함수 등록
// => 클라이언트에 저장된 쿠키 삭제
document.getElementById("removeBtn").onclick=function() {
//쿠키의 지속기간을 과거로 변경 - 쿠키 삭제
setCookie("id", "", "/", -1);
}
</script>
</body>
</html>
'학원 > 복기' 카테고리의 다른 글
| [jQuery] 선택자(Selector) (0) | 2023.06.12 |
|---|---|
| [jQuery] jQuery란? / jQuery 라이브러리 이용법 (0) | 2023.06.12 |
| [JavaScript] form 태그 관련 이벤트 (사용자 입력값 검증) (0) | 2023.06.11 |
| [JavaScript] DHTML(Dynamic HTML) (0) | 2023.06.11 |
| [JavaScript] addEventListener 메소드 (0) | 2023.06.11 |
