1. 쿠키 설정 (생성)
- 쿠키는 JavaScript에서 document.cookie를 사용해 설정할 수 있습니다.
- 기본 형식: document.cookie = "name=value; expires=expirationDate; path=path";
// 이름이 "username"이고 값이 "JohnDoe"인 쿠키를 생성합니다.
document.cookie = "username=JohnDoe";
이 쿠키는 브라우저가 닫힐 때까지 기본적으로 유지됩니다. 만료 날짜를 설정하면 특정 시간 이후에 쿠키가 삭제됩니다.
// 만료 날짜를 설정합니다 (예: 7일 후에 만료).
const now = new Date();
now.setTime(now.getTime() + 7 * 24 * 60 * 60 * 1000); // 7일 후
document.cookie = "username=JohnDoe; expires=" + now.toUTCString();
2. 쿠키 읽기
- document.cookie를 호출하면 현재 저장된 모든 쿠키를 문자열로 반환합니다.
- 반환되는 형식: "name1=value1; name2=value2; ...".
function getCookie(name) {
const cookieArr = document.cookie.split("; ");
for (let cookie of cookieArr) {
const [cookieName, cookieValue] = cookie.split("=");
if (cookieName === name) {
return cookieValue;
}
}
return null; // 쿠키가 없을 경우
}
// "username" 쿠키 값을 가져옵니다.
const username = getCookie("username");
console.log(username); // "JohnDoe"가 출력됩니다 (있는 경우)
3. 쿠키 삭제
- 쿠키를 삭제하려면 expires 속성을 과거 날짜로 설정합니다.
// "username" 쿠키를 삭제합니다.
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
4. 옵션 설정
- path: 쿠키가 유효한 경로를 설정합니다. 기본값은 현재 경로입니다.
document.cookie = "username=JohnDoe; path=/";
- domain: 쿠키가 유효한 도메인을 설정합니다.
- secure: HTTPS 연결에서만 쿠키를 전송하도록 설정합니다.
- HttpOnly: 클라이언트 측 스크립트에서 쿠키에 접근하지 못하게 설정합니다 (JavaScript에서 설정할 수 없으며 서버 측에서 설정해야 함).
5. 실제 사용 예시
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button onclick="checkCookie()">Check Cookie</button>
<script>
function setCookie(cname, cvalue, exdays){
let d = new Date();
d.setTime(d.getTime() + (60 * 1000));
let expires = "expires=" + d.toUTCString();
document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}
function getCookie(cname){
let name = cname + "=";
let ca = document.cookie.split(';');
for(let i=0; i<ca.length; i++){
let 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(){
let user = getCookie("username");
if(user != ""){
alert("Welcome agein" + user);
} else {
user = prompt("Please enter your name:", "");
if(user != "" && user != null){
setCookie("username", user, 365);
}
}
}
</script>
</body>
</html>
반응형
'JAVASCRIPT' 카테고리의 다른 글
| JAVASCRIPT ) 인터페이스란? (0) | 2024.10.31 |
|---|---|
| JAVASCRIPT ) toPrecision() (0) | 2024.10.29 |
| JAVASCRIPT ) 문자열 공백 제거 함수 trim() (0) | 2024.10.15 |
| JAVASCRIPT ) 전치행렬 (0) | 2024.08.26 |
| JAVASCRIPT ) 부울행렬의 연산 (0) | 2024.08.26 |
