쿠키 Java스크립트: 설정, 가져오기 및 삭제 예제
제임스 하트만
⚡ 스마트 요약
쿠키 Java스크립트는 방문자의 컴퓨터에 작은 키-값 쌍을 저장하여 상태 비저장 HTTP 연결이 정보를 기억할 수 있도록 합니다. 이 문서에서는 쿠키를 설정, 읽기 및 삭제하는 방법, 각 쿠키 속성에 대한 설명, 그리고 쿠키와 브라우저의 다른 저장 방식과의 비교를 설명합니다.
쿠키는 무엇입니까?
쿠키는 브라우저가 접근할 수 있도록 컴퓨터에 저장되는 작은 데이터 조각입니다. 여러분은 의식적으로든 무의식적으로든 쿠키의 편리함을 누려왔을지도 모릅니다. 페이스북과 같은 사이트에 로그인할 때마다 정보를 입력하지 않아도 되도록 자동 로그인 기능을 사용해 본 적이 있으신가요? 만약 그렇다면, 여러분은 쿠키를 사용하고 있는 것입니다. 쿠키는 키/값 쌍으로 저장됩니다.
중요한 점을 명확히 하자면, 쿠키에는 비밀번호가 저장되지 않습니다. 쿠키에는 세션 식별자, 즉 로그인 성공 후 서버에서 발급하는 임의의 토큰이 저장됩니다. 서버는 이 토큰을 사용자의 계정과 대조하므로 비밀번호 자체는 서버 외부로 유출되지 않습니다.
쿠키가 왜 필요한가요?
A 사이의 통신 웹 브라우저 서버는 HTTP라는 상태 비저장 프로토콜을 사용하여 작동합니다. 상태 비저장 프로토콜은 각 요청을 독립적으로 처리합니다. 따라서 서버는 브라우저로 데이터를 전송한 후 데이터를 저장하지 않습니다. 하지만 여러 상황에서 해당 데이터가 다시 필요할 수 있습니다. 바로 이때 쿠키가 등장합니다. 쿠키를 사용하면 웹 브라우저는 데이터가 필요할 때마다 서버와 통신할 필요 없이 컴퓨터에서 직접 데이터를 가져올 수 있습니다.
일반적인 용도로는 로그인 세션 기억, 언어 또는 테마 기본 설정 저장 등이 있습니다.ping 상점의 물건들ping 페이지 간 장바구니 기능을 활용하고, 처음 방문하는 사람과 재방문하는 사람을 구분합니다.
Javascript 쿠키 설정
다음과 같이 document.cookie 속성을 사용하여 쿠키를 생성할 수 있습니다.
document.cookie = "cookiename=cookievalue"
쿠키에 만료일을 추가하여 지정된 날짜에 컴퓨터에서 해당 쿠키가 삭제되도록 할 수도 있습니다. 만료일은 UTC/GMT 형식으로 설정해야 합니다. 만료일을 설정하지 않으면 사용자가 브라우저를 닫을 때 쿠키가 삭제됩니다.
document.cookie = "cookiename=cookievalue; expires= Thu, 21 Aug 2031 20:00:00 UTC"
쿠키가 속할 도메인과 해당 도메인 내의 특정 디렉터리를 지정하기 위해 도메인과 경로를 설정할 수도 있습니다. 기본적으로 쿠키는 쿠키를 설정한 페이지에 속합니다.
document.cookie = "cookiename=cookievalue; expires= Thu, 21 Aug 2031 20:00:00 UTC; path=/ "
//현재 페이지의 도메인과 해당 도메인 전체를 포함하는 경로를 가진 쿠키를 생성합니다.
⚠️ 경고: 만료일은 반드시 미래 날짜여야 합니다. 이미 지난 날짜를 설정하면 브라우저는 쿠키를 즉시 삭제하게 되는데, 이는 아래 삭제 섹션에서 사용하는 방법과 정확히 일치합니다.
Java스크립트 쿠키 가져오기
다음과 같이 쿠키에 접근할 수 있으며, 현재 도메인에 저장된 모든 쿠키를 반환합니다.
var x = document.cookie
반환 값은 다음과 같은 형식의 단일 문자열입니다. name1=value1; name2=value2이름으로 쿠키 하나를 읽는 내장 메서드가 없으므로 문자열을 분할해야 합니다. 아래 헬퍼 함수는 이름이 없는 경우 단일 값을 반환하고, 이름이 없는 경우에는 빈 문자열을 반환합니다.
function getCookie(name) { const pairs = document.cookie.split(";"); for (let i = 0; i < pairs.length; i++) { const pair = pairs[i].trim(); if (pair.indexOf(name + "=") === 0) { // decode in case the value contained spaces or symbols return decodeURIComponent(pair.substring(name.length + 1)); } } return ""; } document.cookie = "username=Ann Smith; path=/"; console.log(getCookie("username")); console.log(getCookie("missing") === "");
출력:
Ann Smith true
Java스크립트 쿠키 삭제
쿠키를 삭제하려면 쿠키 값을 비워두고 만료일 값을 이미 지난 날짜로 설정하기만 하면 됩니다.
document.cookie = "cookiename= ; expires = Thu, 01 Jan 1970 00:00:00 GMT"
삭제 실패의 대부분은 한 가지 세부 사항 때문에 발생합니다. 브라우저는 쿠키를 이름과 경로 및 도메인을 함께 사용하여 식별하므로, 삭제 구문에는 쿠키 생성 시 사용했던 것과 동일한 경로와 도메인을 반복해서 지정해야 합니다.
// created with an explicit path document.cookie = "theme=dark; path=/; max-age=2592000"; // deletion must repeat that same path document.cookie = "theme=; path=/; expires=Thu, 01 Jan 1970 00:00:00 GMT"; // max-age=0 achieves the same result in one shorter line document.cookie = "theme=; path=/; max-age=0";
쿠키 속성 설명
첫 번째 세미콜론 뒤의 각 속성은 쿠키의 유효 기간, 쿠키를 전달하는 요청, 그리고 쿠키를 읽을 수 있는 코드에 영향을 미칩니다. 아래 참조 문서에서 이러한 모든 속성을 확인할 수 있습니다.
| 속성 | 목적 | 예시 |
|---|---|---|
| 만료 | 절대 삭제 날짜(UTC 형식) | 만료일: 2031년 8월 21일 목요일 20:00:00 UTC |
| 최대 연령 | 지금부터 계산한 수명(초) | 최대 연령=2592000 |
| 통로 | 도메인 내부의 디렉터리 범위 | 경로=/ |
| 도메인 | 호스트 범위(하위 도메인 포함) | 도메인=example.com |
| 보안 | HTTPS 연결을 통해서만 전송됩니다. | 보안 |
| HttpOnly | document.cookie에는 표시되지 않으며 서버에서만 설정됩니다. | HttpOnly |
| 같은 사이트 | 사이트 간 요청 전송 제어 | 동일 사이트=완화 |
SameSite는 브라우저에서 기본값을 적용하기 때문에 특히 주의해야 합니다. 허용되는 세 가지 값은 다음과 같이 작동합니다.
- 엄격한: 요청이 다른 사이트에서 시작된 경우에는 쿠키가 절대 전송되지 않으며, 이는 뱅킹 세션에 있어 가장 안전한 설정입니다.
- 느슨한: 쿠키는 링크 클릭과 같은 최상위 탐색 활동과 함께 이동하지만, 사이트 간 이미지나 프레임과는 함께 이동하지 않습니다. 이것이 최신 브라우저의 기본 설정입니다.
- 없음 : 쿠키는 모든 사이트 간 요청 시 전송되며, 반드시 Secure 속성과 함께 사용되어야 합니다. 그렇지 않으면 브라우저에서 쿠키를 거부합니다.
// a well configured cookie set from client side script document.cookie = "language=en; path=/; max-age=31536000; SameSite=Lax; Secure";
💡 팁: HttpOnly 속성은 다음에서 적용할 수 없습니다. Java스크립트는 의도적으로 설계되었습니다. 서버 응답 헤더만 설정할 수 있으며, 이것이 세션 쿠키를 크로스 사이트 스크립팅 공격으로부터 보호하는 장치입니다.
이 예제를 직접 시도해 보세요
아래 스크립트는 세 가지 작업을 모두 결합합니다. 만료 기간이 일 단위로 설정된 쿠키를 생성하고, 이름으로 쿠키를 읽어들이며, 재방문자에게 환영 메시지를 표시합니다. 코드를 작동시키기 위한 특별 지침… 실행 버튼을 두 번 누르세요.
<html>
<head>
<title>Cookie!!!</title>
<script type="text/javascript">
function createCookie(cookieName,cookieValue,daysToExpire)
{
var date = new Date();
date.setTime(date.getTime()+(daysToExpire*24*60*60*1000));
document.cookie = cookieName + "=" + cookieValue + "; expires=" + date.toGMTString();
}
function accessCookie(cookieName)
{
var name = cookieName + "=";
var allCookieArray = document.cookie.split(';');
for(var i=0; i<allCookieArray.length; i++)
{
var temp = allCookieArray[i].trim();
if (temp.indexOf(name)==0)
return temp.substring(name.length,temp.length);
}
return "";
}
function checkCookie()
{
var user = accessCookie("testCookie");
if (user!="")
alert("Welcome Back " + user + "!!!");
else
{
user = prompt("Please enter your name");
num = prompt("How many days you want to store your name on your computer?");
if (user!="" && user!=null)
{
createCookie("testCookie", user, num);
}
}
}
</script>
</head>
<body onload="checkCookie()"></body>
</html>
예상되는 동작:
First run : "Please enter your name" -> Ann
"How many days you want to store your name on your computer?" -> 5
Second run : alert box shows Welcome Back Ann!!!
Code 설명: createCookie 함수는 일수를 밀리초로 변환하여 현재 시간에 더함으로써 만료일을 생성합니다. accessCookie 함수는 쿠키 문자열을 세미콜론을 기준으로 분할하고, 각 부분을 다듬은 후, 각 부분의 시작 부분을 요청된 이름과 비교합니다. checkCookie 함수는 페이지 로드 시 이 두 쿠키를 결합합니다.
⚠️ 경고: 이 예시는 다음을 사용합니다. toGMTString()이는 더 이상 사용되지 않는 별칭입니다. 새 코드에서는 를 호출해야 합니다. toUTCString() 대신, 더 이상 사용되지 않는 형식이 결국 브라우저에서 제거될 수 있기 때문입니다.
쿠키 vs 로컬 스토리지 vs 세션 스토리지
쿠키는 브라우저가 데이터를 저장하는 유일한 장소가 아닙니다. 웹 스토리지에는 두 가지 옵션이 있으며, 이를 올바르게 선택하면 모든 요청마다 불필요한 데이터 전송을 방지할 수 있습니다.
| 제품 특장점 | Cookie | localStorage | 세션 저장소 |
|---|---|---|---|
| 생산 능력 | 약 4KB | 약 5MB | 약 5MB |
| 서버로 전송됨 | 네, 모든 매칭 요청에 대해 그렇습니다. | 아니 | 아니 |
| 수명 | 만료일까지 | 명시적으로 삭제될 때까지 | 탭이 닫힐 때까지 |
| 서버가 쓸 수 있습니다 | 가능 | 아니 | 아니 |
| 모든 탭에서 이용 가능 | 가능 | 가능 | 아니 |
| 일반적인 사용 | 세션 및 인증 | 환경설정 및 캐시된 데이터 | 1회 방문 양식 상태 |
실용적인 규칙은 간단합니다. 서버에서 값이 필요한 경우 쿠키를 사용하고, 페이지에서만 필요한 경우 localStorage 또는 sessionStorage를 사용하세요. 이러한 값은 네트워크 요청에 부하를 주지 않습니다.
쿠키 처리 코드는 일반적으로 여러 페이지에서 공유되므로 검토가 필요합니다. 내부적 인 그리고 외부적인 Java스크립트 어디에 배치할지 결정하기 전에. 여기에 사용된 문자열 분할은 다음을 기반으로 합니다. Java스크립트 문자열 Java스크립트 배열 메서드그리고 추가 작업 스크립트는 다음과 같습니다. 실용적인 Java스크립트 코드 예시.
