JavaScript의 쿠키에 대한 종합 가이드

JavaScript의 쿠키

쿠키는 웹사이트가 사용자의 브라우저에 저장하는 작은 데이터 조각입니다. 일반적으로 사용자 기본 설정을 저장하고, 세션을 추적하거나, 요청 간 상태를 유지하는 데 사용됩니다.

JavaScript는 쿠키를 생성하고 읽고 삭제하는 간단한 방법을 제공하므로 클라이언트측 저장 및 세션 관리에 필수적인 도구입니다.

---

1. 쿠키 설정

쿠키는 document.cookie에 문자열을 할당하여 생성됩니다.

구문:

document.cookie = "key=value; expires=DATE; path=PATH; domain=DOMAIN; secure; SameSite=VALUE";

• key=value: 쿠키의 키-값 쌍.
• 만료: 만료 날짜(선택 사항). 설정하지 않을 경우 해당 쿠키는 세션 쿠키로 브라우저 종료 시 삭제됩니다.
• 경로: 쿠키에 접근할 수 있는 사이트 내 경로(기본값: 현재 경로).
• 도메인: 쿠키에 접근할 수 있는 도메인(기본값: 현재 도메인).
• 보안: 쿠키는 HTTPS를 통해서만 전송됩니다.
• SameSite: 사이트 간 동작을 제어합니다(Strict, Lax 또는 None).

예:

document.cookie = "username=JohnDoe; expires=Fri, 31 Dec 2024 23:59:59 GMT; path=/";

---

2. 쿠키 읽기

document.cookie 속성은 현재 도메인 및 경로에 대한 모든 쿠키를 단일 문자열로 반환합니다.

예:

console.log(document.cookie);
// Output: "username=JohnDoe; theme=dark; sessionId=abc123"

특정 쿠키를 추출하려면 문자열을 구문 분석하세요.

function getCookie(name) {
  const cookies = document.cookie.split("; ");
  for (let cookie of cookies) {
    const [key, value] = cookie.split("=");
    if (key === name) return value;
  }
  return null;
}
console.log(getCookie("username")); // Output: JohnDoe

---

3. 쿠키 업데이트

쿠키를 업데이트하려면 동일한 키를 사용하여 값이나 옵션을 다르게 설정하세요.

예:

document.cookie = "username=JaneDoe; expires=Fri, 31 Dec 2024 23:59:59 GMT; path=/";
console.log(document.cookie); // Output: "username=JaneDoe; ..."

---

4. 쿠키 삭제

쿠키를 삭제하려면 만료일을 과거 날짜로 설정하세요.

예:

document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";

---

5. 특수문자 처리

쿠키 값의 특수 문자는 encodeURIComponent를 사용하여 인코딩하고 decodeURIComponent를 사용하여 디코딩해야 합니다.

예:

document.cookie = "userInfo=" + encodeURIComponent("John Doe & Admin");
console.log(decodeURIComponent(getCookie("userInfo"))); // Output: John Doe & Admin

---

6. 보안 고려사항

1. 보안 플래그:
   • 쿠키가 HTTPS를 통해서만 전송되도록 하려면 보안을 사용하세요.

   document.cookie = "sessionId=abc123; secure";

1. HttpOnly 쿠키:

   • JavaScript를 통해 접속할 수 없습니다(서버측에서 설정).

2. 동일 사이트 속성:

   • CSRF 공격을 방지하기 위해 크로스 사이트 쿠키 동작을 제어합니다.

document.cookie = "key=value; expires=DATE; path=PATH; domain=DOMAIN; secure; SameSite=VALUE";

---

7. 쿠키 속성 요약

Attribute	Description
expires	Expiration date for the cookie.
path	Limits cookie to specific paths.
domain	Specifies the domain for the cookie.
secure	Ensures cookie is sent over HTTPS.
SameSite	Controls cross-site cookie behavior.

---

8. JavaScript로 쿠키 관리

쿠키 관리를 더 쉽게 하려면 유틸리티 함수에 일반적인 작업을 캡슐화하세요.

예:

document.cookie = "username=JohnDoe; expires=Fri, 31 Dec 2024 23:59:59 GMT; path=/";

---

9. 요약

쿠키는 웹 애플리케이션의 상태를 유지하기 위한 기본 도구입니다. 올바르게 처리하면 사용자 데이터를 보호하는 동시에 기능도 보장됩니다.

• 더 안전한 쿠키를 위해 Secure 및 SameSite를 사용하세요.
• 민감한 정보를 쿠키에 직접 저장하지 마세요.
• JavaScript 유틸리티를 사용하여 쿠키 관리를 단순화하세요.

안녕하세요. 저는 Abhay Singh Kathayat입니다!
저는 프론트엔드와 백엔드 기술 모두에 대한 전문 지식을 갖춘 풀스택 개발자입니다. 저는 효율적이고 확장 가능하며 사용자 친화적인 애플리케이션을 구축하기 위해 다양한 프로그래밍 언어와 프레임워크를 사용하여 작업합니다.
제 비즈니스 이메일(kaashshorts28@gmail.com)로 언제든지 연락주세요.

위 내용은 JavaScript의 쿠키에 대한 종합 가이드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!