쿠키는 맛있는 간식이자 현대 웹사이트의 중요한 부분입니다.
쿠키를 사용하면 웹 브라우저에서 사용자에 대한 데이터를 저장할 수 있습니다. 쿠키는 종종 인증 세션과 같은 정보를 저장하므로 브라우저는 귀하가 웹 페이지에 로그인했음을 기억합니다.
이 가이드에서는 쿠키가 존재하는 이유, 쿠키의 유형 및 JavaScript에서 쿠키를 사용하는 방법에 대해 설명합니다. 시작하겠습니다!
브라우저 쿠키란 무엇입니까?
쿠키는 브라우저에 사용자에 대한 정보를 저장하는 텍스트 문자열입니다. 이 아이디어는 1990년대에 세계에서 가장 인기 있는 브라우저 중 하나를 개발한 Netscape에 의해 개척되었습니다. Netscape는 사용자가 이미 사이트를 방문했는지 여부를 추적하는 쿠키를 개발했습니다. 만약 알고 있었다면 사용자는 Netscape에 대해 어느 정도 알고 있었을 것입니다.
쿠키는 최소한 이름과 값 필드를 포함해야 합니다. 이름 필드는 값 필드의 내용을 식별하는 데 사용됩니다. 쿠키는 응용 프로그램에서 쿠키를 사용하는 방법에 따라 파일 경로 및 만료 시간과 같은 추가 속성을 저장할 수 있습니다.
다음은 쿠키의 예입니다.
Name: Authentication Value: AUTHENTICATION_KEY Domain: careerkarma.com
쿠키는 키:값 쌍에 저장됩니다. 이 쿠키를 보면 다음이 표시됩니다.
Authentication=AUTHENTICATION_KEY
이 쿠키는 브라우저에 AUTHENTICATION_KEY 값을 저장합니다. Careerkarma.com 도메인에 액세스할 때마다 해당 쿠키를 사이트에서 사용할 수 있습니다.
참가자의 81%는 부트캠프에 참석한 후 기술 직업 전망에 대해 더 자신감을 느꼈다고 말했습니다. 지금 부트캠프에 참여하십시오.
부트캠프 졸업생은 부트캠프 시작부터 첫 직장을 찾는 데까지 6개월도 채 걸리지 않았습니다.
사이트에 설정할 수 있는 쿠키 수에는 제한이 없지만 대부분의 응용 프로그램은 몇 개만 설정하면 됩니다. 종종 쿠키는 사용자의 세션을 추적하는 데 사용됩니다.
브라우저 쿠키 검색
JavaScript에는 사이트에서 사용할 수 있는 모든 쿠키에 대한 정보를 저장하는 document.cookie라는 개체가 있습니다. 쿠키를 설정, 업데이트 및 삭제하려면 이 개체를 조작해야 합니다. 쿠키를 검색하려면 이 개체를 호출하면 됩니다.
console.log(document.cookie);
이 코드는 브라우저에 설정된 모든 쿠키 목록을 반환합니다. 사용자 지정 함수를 작성하지 않고 이 목록에서 개별 쿠키를 검색할 수 있는 방법은 없습니다.
브라우저 쿠키 설정 방법
브라우저 쿠키는 어떻게 설정합니까? 글쎄, 당신이 미리 알아야 할 한 가지가 있습니다. 그것은 틀림없이 자신의 쿠키를 굽는 것보다 쉽습니다.
사용자의 이메일을 쿠키에 저장하고 싶다고 가정해 보겠습니다. 다음 JavaScript 코드를 사용하여 그렇게 할 수 있습니다.
document.cookie = "email=user@email.com"; console.log(document.cookie);
이 코드는 이름이 "email"이고 값이 "user@email.com"인 쿠키를 생성합니다. console.log() 문은 다음을 반환합니다.
email=user@email.com;
쿠키를 사용할 수 있는 경로를 지정할 수도 있습니다.
document.cookie = "email=user@email.com; path=/dashboard";
이 코드는 "/dashboard"로 시작하는 모든 경로에서 "email" 쿠키를 사용할 수 있도록 합니다.
쿠키 만료일
기본적으로 쿠키는 브라우저가 닫힐 때 삭제됩니다. 쿠키를 설정할 때 선택적으로 이 설정을 무시하는 만료 날짜를 추가할 수 있습니다.
document.cookie = "email=user@email.com; expires=Wed, 24 Jun 2019 12:00:00 UTC";
이렇게 하면 하루가 시작될 때 2020년 6월 24일에 만료되는 쿠키가 생성됩니다. 만료 날짜는 UTC 시간으로 지정해야 합니다.
만료 날짜를 설정하는 일반적인 방법 중 하나는 UTC 타임스탬프를 반환하는 JavaScript Date 객체를 사용하는 것입니다. 2020년 6월 30일에 만료되도록 설정된 쿠키는 다음 코드를 사용합니다.
const expiryDate = new Date(2020, 6, 30); document.cookie = "email=user@email.com; expires=" + expiryDate + ";";
document.cookie 객체는 쿠키의 최대 사용 기간 또는 쿠키가 만료되기 전에 사용할 수 있는 기간을 나타내는 Max-Age 설정을 지원합니다. 모든 브라우저에서 지원되는 것은 아니지만 사용자가 쿠키 생성을 시작한 시점에 따라 만료되는 쿠키를 쉽게 생성할 수 있습니다.
const expiryDate= 24 * 60 * 60 * 2; document.cookie = "email=user@email.com; max-age=" + expiryDate + ";";
이렇게 하면 이틀 후에 만료되는 쿠키가 생성됩니다.
쿠키 업데이트 및 삭제
쿠키를 업데이트하거나 삭제하는 데 사용되는 기능은 없습니다. 대신 "document.cookie" 개체를 변경합니다.
쿠키를 만들 때와 같은 방식으로 쿠키를 업데이트할 수 있습니다.
document.cookie = "email=user@email.app;"
이것은 "email"의 값을 "user@email.com"에서 "user@email.app"으로 변경합니다.
쿠키를 삭제할 때도 유사한 접근 방식을 사용합니다. 쿠키를 생성하거나 업데이트하는 데 사용된 것과 동일한 구문을 사용하기만 하면 됩니다. 단, 쿠키에 할당된 값은 제거하세요.
document.cookie = "email=; expires=Wed, 24 Jun 2019 12:00:00 UTC; path/;"
올바른 쿠키를 삭제하려면 경로를 지정해야 합니다.
쿠키 유형
산딸기. 초코칩. 퍼지. 아니요, 그런 종류의 쿠키가 아닙니다! 브라우저에는 세션, 타사 및 영구 쿠키의 세 가지 주요 유형이 있습니다.
세션 쿠키는 브라우저가 닫힐 때까지 존재하는 쿠키입니다. 이들은 첫 번째 예에서와 같이 만료 날짜 없이 설정된 쿠키입니다. 일부 개발자는 사용자를 인증하는 쿠키를 지칭하기 위해 "세션 쿠키"라는 용어를 사용하지만 세션 쿠키가 인증에 사용할 수 있는 유일한 쿠키는 아닙니다.
영구 쿠키는 브라우저가 닫힌 후에도 존재하는 쿠키입니다. 만료일이 설정된 쿠키입니다.
타사 쿠키는 다른 웹사이트에서 생성된 쿠키입니다. 이에 대한 예는 Google Analytics 쿠키입니다. 사이트에 Google Analytics를 설치하면 확장 프로그램이 사용자를 추적하기 위해 쿠키를 설정할 수 있습니다.
결론
쿠키는 브라우저에 사용자 정보를 저장하는 편리한 방법입니다. 사용자가 이전에 사이트를 방문했는지 여부를 추적하고 인증 쿠키를 저장하는 데 자주 사용됩니다.
쿠키에는 세션, 영구 및 타사의 세 가지 주요 유형이 있습니다. 자체 애플리케이션의 경우 주로 세션 및 영구 쿠키 사용에 중점을 둘 것입니다.