728x90
1. 쿠키란?
쿠키는 클라이언트(사용자 브라우저) 측에 저장되는 작은 데이터 조각입니다. 서버에서 클라이언트로 전송되며, 클라이언트는 이 데이터를 저장한 후 동일한 도메인에 요청을 보낼 때마다 쿠키를 함께 전송합니다.
쿠키의 기본 특징
- 이름과 값의 쌍으로 이루어져 있습니다.
- 유효기간을 설정할 수 있습니다.
- 도메인과 경로에 따라 다르게 저장할 수 있습니다.
- 보안이 중요한 데이터는 HTTPOnly 및 Secure 플래그를 설정할 수 있습니다.
2. JavaScript로 쿠키 저장하기
JavaScript에서 쿠키를 저장하려면 document.cookie 속성을 사용합니다. 쿠키는 단순한 문자열 형식으로 저장되며, 기본적으로 다음과 같은 형식을 따릅니다:
document.cookie = "name=value; expires=날짜; path=경로";예제: 쿠키 저장하기
function setCookie(name, value, days) {
let date = new Date();
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000)); // 쿠키 유효기간 설정
let expires = "expires=" + date.toUTCString();
document.cookie = name + "=" + value + "; " + expires + "; path=/";
}
// 7일 동안 유효한 'username' 쿠키 저장
setCookie('username', 'JohnDoe', 7);설명
- name: 쿠키의 이름입니다.
- value: 쿠키에 저장할 값입니다.
- days: 쿠키가 유효한 기간(일 단위)입니다.
- date.setTime(): 현재 시간을 기준으로 유효기간을 설정합니다.
- expires: 쿠키 만료 시간을 지정합니다.
- path=/: 쿠키가 적용될 경로를 설정합니다. /로 지정하면 사이트 전체에서 쿠키에 접근할 수 있습니다.
위 예제는 'username'이라는 이름으로 'JohnDoe' 값을 가진 쿠키를 7일 동안 저장합니다.
3. JavaScript로 쿠키 불러오기
쿠키는 document.cookie 속성에서 문자열로 읽어올 수 있습니다. 하지만 쿠키는 여러 개의 값이 하나의 문자열로 저장되기 때문에, 이를 파싱하여 원하는 값을 추출해야 합니다.
예제: 쿠키 불러오기
function getCookie(name) {
let decodedCookie = decodeURIComponent(document.cookie); // 쿠키 문자열을 디코딩
let cookies = decodedCookie.split(';'); // 쿠키를 세미콜론으로 분리
for (let i = 0; i < cookies.length; i++) {
let cookie = cookies[i].trim(); // 공백 제거
if (cookie.indexOf(name + "=") == 0) {
return cookie.substring(name.length + 1, cookie.length); // 쿠키 값 반환
}
}
return "";
}
// 'username' 쿠키 불러오기
let username = getCookie('username');
console.log(username); // 결과: 'JohnDoe'설명
- decodeURIComponent(): 쿠키 문자열을 URI 디코딩하여 특수 문자가 정상적으로 표현되도록 합니다.
- split(';'): 쿠키 문자열을 세미콜론(;) 기준으로 분리합니다.
- trim(): 각 쿠키 앞뒤에 있을 수 있는 공백을 제거합니다.
- indexOf(): 쿠키 문자열에서 원하는 쿠키의 이름을 찾아 값을 반환합니다.
이 함수는 쿠키 이름을 인자로 받아 해당 쿠키 값을 반환하며, 만약 해당 쿠키가 없다면 빈 문자열을 반환합니다.
4. JavaScript로 쿠키 삭제하기
쿠키를 삭제하려면 만료일을 과거로 설정하여 쿠키를 만료시키면 됩니다. 이때 setCookie() 함수와 동일한 방식으로 쿠키를 설정하되, 만료일을 현재 시간보다 이전으로 설정합니다.
예제: 쿠키 삭제하기
function deleteCookie(name) {
setCookie(name, "", -1); // 만료일을 과거로 설정
}
// 'username' 쿠키 삭제
deleteCookie('username');설명
- setCookie() 함수에서 days 값을 -1로 설정하여 쿠키의 만료일을 과거로 설정하면, 해당 쿠키는 즉시 삭제됩니다.
5. 전체 예제: 쿠키 저장, 불러오기, 삭제하기
위에서 설명한 내용을 하나의 예제로 묶어 봅시다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>쿠키 예제</title>
</head>
<body>
<h1>쿠키 예제</h1>
<button onclick="setCookie('username', 'JohnDoe', 7)">쿠키 저장</button>
<button onclick="alert(getCookie('username'))">쿠키 불러오기</button>
<button onclick="deleteCookie('username')">쿠키 삭제</button>
<script>
function setCookie(name, value, days) {
let date = new Date();
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
let expires = "expires=" + date.toUTCString();
document.cookie = name + "=" + value + "; " + expires + "; path=/";
}
function getCookie(name) {
let decodedCookie = decodeURIComponent(document.cookie);
let cookies = decodedCookie.split(';');
for (let i = 0; i < cookies.length; i++) {
let cookie = cookies[i].trim();
if (cookie.indexOf(name + "=") == 0) {
return cookie.substring(name.length + 1, cookie.length);
}
}
return "";
}
function deleteCookie(name) {
setCookie(name, "", -1);
}
</script>
</body>
</html>설명
- 쿠키 저장 버튼: 'username' 쿠키를 7일 동안 저장합니다.
- 쿠키 불러오기 버튼: 'username' 쿠키 값을 팝업으로 표시합니다.
- 쿠키 삭제 버튼: 'username' 쿠키를 삭제합니다.
LIST
'Develop' 카테고리의 다른 글
| [PostgreSQL] 숫자를 금액단위 3자리마다 콤마로 변환하는 방법 (8) | 2024.10.22 |
|---|---|
| JavaScript와 jQuery를 사용해서 disabled 활성화, 비활성화 방법 (5) | 2024.10.22 |
| [PostgreSQL] 여러행을 한줄로 조회 Row to Column (11) | 2024.10.21 |
| [JavaScript] 소수점 올림, 버림, 반올림 사용방법 (6) | 2024.10.21 |
| [JavaScript] URL 인코딩과 디코딩 쉽고 간단하게 적용 (6) | 2024.10.17 |