JavaScript에서 쿠키 설정

1. JavaScript에서 쿠키 설정
2. 쿠키 만료 날짜 설정
3. 쿠키 경로 설정
4. setCookie() 기능

쿠키는 클라이언트 측과 서버 측 간의 연결을 가능하게 하는 정보 조각입니다. 웹 브라우저는 브라우징 시 이를 저장합니다.

일반적으로 쿠키에는 문자열로 세미콜론으로 구분된 이름-값 쌍 형식의 데이터가 포함되어 있습니다. 또한 쿠키는 사용자의 상태를 유지하고 모든 웹 페이지에서 사용자의 정보를 기억합니다.

JavaScript를 고려할 때 쿠키는 document.cookie 속성을 사용하여 생성, 읽기, 업데이트 및 삭제할 수 있습니다. 쿠키는 아래 구문에 따라 이름, 값, 만료, 경로, 도메인 및 보안의 6개 세그먼트로 구성됩니다.

통사론:

document.cookie = 'name=VALUE; expires=DATE; path=PATH; domain=DOMAIN; secure';

여기에서 첫 번째 세그먼트(name=VALUE)의 존재가 필수적이며 다른 세그먼트는 요구 사항에 따라 필요한 경우 사용자가 제공할 수 있습니다.

JavaScript에서 쿠키 설정

document.cookie = 'new_cookie'

먼저 위의 구문을 사용하여 각 세그먼트를 스타트업으로 자세히 고려하십시오.

1. document.cookie 명령은 새 쿠키를 생성합니다.
2. 여기에서 new_cookie는 쿠키의 값을 설정하는 문자열이며 구문은 name=VALUE입니다. 여기서 name은 쿠키가 가독성 형식으로 저장해야 하는 항목을 의미해야 하며 VALUE는 단순히 사용자가 선호하는 값입니다.

쿠키를 설정하는 예:

document.cookie = 'username=John Ricks';

여기에서 쿠키는 username을 이름으로, 값은 John Ricks로 저장됩니다.

출력:

쿠키 만료 날짜 설정

쿠키는 코드에 설정된 사용자의 만료 날짜에 따라 자동으로 만료됩니다. 만료 날짜를 설정하지 않으면 사용자가 브라우저를 닫을 때 쿠키가 제거되어 사용자가 웹 페이지를 방문할 때 쿠키 값을 다시 사용할 수 없습니다.

아래 예와 같이 세미콜론으로 구분된 시간 표준인 UTC (Universal Time Coordinated)에 expires=DATE를 추가하기만 하면 쿠키의 만료 날짜를 설정하여 이 문제를 무시할 수 있습니다.

document.cookie = 'username=John Ricks; expires=Wed, 31 Aug 2022 21:00:00 UTC';

출력:

쿠키 경로 설정

경로 매개변수를 사용하여 사용자는 디렉토리 또는 웹 페이지에서 쿠키가 속한 경로를 브라우저에 알릴 수 있습니다. 기본적으로 쿠키는 사용자가 액세스하는 현재 페이지에 속합니다.

디렉토리나 웹 페이지에서 쿠키를 가져온 후에는 이 경로가 비어 있을 수 있습니다. 이 매개변수는 사용자 컴퓨터에서 쿠키가 저장되는 위치를 수정하며 찾기 어렵기 때문에 중요한 정보를 저장할 때 유용합니다.

아래 코드와 같이 쿠키에 경로를 추가할 수 있습니다.

document.cookie =
    'username=John Ricks; expires=Wed, 31 Aug 2022 21:00:00 UTC; path=/'

출력:

또한 필요에 따라 쿠키 설정 시 도메인 및 보안을 추가할 수 있습니다. 도메인을 추가하는 목적은 다른 하위 도메인에 대한 쿠키를 허용하는 것입니다.

보안 부분은 기본값이 빈 필드인 false인 부울 값입니다. 쿠키가 보안으로 표시된 경우 값은 true이므로 쿠키는 웹 서버로 전송되고 보안 통신 채널을 통해서만 검색될 수 있습니다.

setCookie() 기능

쿠키 값을 하드 코딩하지 않고 JavaScript 기능을 사용하여 쿠키 값을 설정할 수 있으며, 이는 대부분의 경우 유용성이 제한될 수 있습니다. 아래 코드는 setCookie() 함수를 정의합니다.

let username = 'John Ricks';

// To set a cookie
function setCookie(cookie_name, cookie_value, expire_date) {
  const c_d = new Date();  // current date
  c_d.setTime(c_d.getTime() + (expire_date * 24 * 60 * 60 * 1000));
  let expires = 'expires=' + c_d.toUTCString();
  document.cookie =
      cookie_name + '=' + cookie_value + '; ' + expires + '; path=/';
}
// to apply setCookie
setCookie('username', username, 20);

출력:

이 기능은 username이라는 이름과 John Ricks의 값을 가진 쿠키를 생성하고 생성한 날로부터 20일의 만료 날짜를 갖습니다.

마찬가지로 JavaScript 함수를 사용하여 getCookie() 함수를 생성하여 쿠키를 얻을 수 있으며 필요한 경우 쿠키를 업데이트하거나 삭제할 수도 있습니다.