Cookie and JavaScript

쿠키는 사용자 장치에 작은 정보 조각을 저장하여 웹사이트 사용자 경험을 향상시키는 데 중요한 역할을 합니다. 이 정보는 웹사이트가 사용자 기본 설정과 활동을 기억하여 후속 방문을 더욱 개인화하는 데 도움이 됩니다.

쿠키는 귀하가 웹사이트를 방문할 때 웹사이트가 귀하의 컴퓨터에 남기는 작은 메모와 같습니다. 이 메모에는 사용자 이름, 언어 기본 설정, 장바구니에 추가한 항목 등 방문에 대한 작은 정보가 포함되어 있습니다. 그것은 웹사이트에 도움이 되는 추억과도 같습니다. 웹사이트에 접속하면 마치 대화를 나누는 것과 같습니다. 귀하는 웹사이트에 귀하의 이름, 선호하는 언어, 관심 분야를 알려줍니다. 그런 다음 웹사이트는 이러한 세부 정보를 쿠키에 기록하여 귀하의 장치에 안전하게 보관합니다. 그리고 웹 개발 세계에서 JavaScript는 이러한 쿠키가 작동하도록 돕습니다.

 

쿠키의 종류

쿠키는 다양한 유형으로 제공되며, 각 쿠키는 귀하의 검색 경험을 향상시키는 고유한 목적을 제공합니다. 쿠키 유형을 이해하면 웹사이트가 귀하의 기본 설정과 활동을 어떻게 기억하는지 이해하는 데 도움이 됩니다. 두 가지 주요 유형을 살펴보겠습니다.

1. 세션 쿠키 : 귀하가 웹사이트를 방문할 때 세션 쿠키를 제공합니다. 이 쿠키는 귀하가 해당 웹사이트를 방문하는 동안의 단기 기억입니다. 브라우저의 메모리에 저장되고 닫히면 삭제됩니다. 웹사이트 세션 동안만 지속됩니다. 읽기를 마친 후 슬레이트를 지우는 것처럼 브라우저를 닫으면 사라집니다.
2. 영구 쿠키 : 영구 쿠키는 일기장과 같습니다. 그들은 더 오랜 기간 동안 귀하의 선호도와 행동을 기록합니다. 귀하가 웹사이트를 방문하면 귀하가 떠났다가 나중에 돌아온 후에도 계속 유지되는 영구 쿠키가 제공될 수 있습니다. 그들은 귀하의 선호도를 기억하여 웹사이트가 귀하를 인식하고 귀하의 이전 방문을 기반으로 귀하의 경험을 맞춤화하도록 합니다. 웹사이트에서 설정한 만료 날짜에 따라 훨씬 더 오래 지속될 수 있습니다. 일부는 몇 년 동안 지속될 수 있지만 다른 일부는 며칠 또는 몇 주 후에 만료될 수 있습니다.

쿠키를 사용해야 하는 경우

쿠키는 다양한 목적으로 사용될 수 있지만 일반적으로 사용자 경험을 개선하고 웹사이트를 보다 효율적으로 만드는 데 사용됩니다. 다음은 쿠키를 사용하는 경우에 대한 몇 가지 구체적인 예입니다.

• 로그인 정보를 기억하려면: 쿠키를 사용하면 사용자의 로그인 정보를 기억하여 웹사이트를 방문할 때마다 로그인 정보를 입력할 필요가 없습니다. 이메일, 소셜 미디어 웹사이트 등 사용자가 자주 로그인해야 하는 웹사이트에 유용합니다.
• 사용자 경험을 개인화하려면: 쿠키를 사용하여 언어, 시간대 등 사용자의 기본 설정을 추적하고 관심 사항과 관련된 콘텐츠를 표시할 수 있습니다. 예를 들어, 뉴스 웹사이트는 쿠키를 사용하여 사용자가 좋아하는 주제를 추적하고 해당 주제에 대한 더 많은 기사를 표시할 수 있습니다.
• 장바구니 내용을 추적하려면: 사용자가 장바구니에 추가한 항목을 추적하는 데 사용할 수 있습니다. 이를 통해 사용자는 웹사이트를 떠났다가 나중에 다시 돌아올 경우 처음부터 다시 시작할 필요 없이 구매를 완료할 수 있습니다.
• 웹사이트 성능을 향상시키려면: 쿠키를 사용하여 데이터를 캐시하고 서버에 전송해야 하는 요청 수를 줄일 수 있습니다. 웹사이트의 로딩 속도를 향상시키고 반응성을 높일 수 있습니다.
• 사용자 행동을 추적하려면: 다양한 웹사이트에서 사용자의 탐색 활동을 추적할 수 있습니다. 이 정보는 타겟 광고, 웹사이트 분석 등 다양한 목적으로 사용될 수 있습니다.

속성

쿠키에는 쿠키 사용 방법과 저장 기간을 제어하는 ​​다양한 속성이 있을 수 있습니다. 가장 일반적인 쿠키 속성은 다음과 같습니다.

• 이름: 쿠키의 이름입니다. 쿠키의 식별자입니다.
• 값: 쿠키의 값입니다. 쿠키에 저장되는 데이터입니다.
• 도메인: 쿠키가 속한 도메인 입니다. 쿠키를 설정하는 웹사이트입니다.
• 경로: 쿠키가 유효한 도메인의 경로입니다. 쿠키가 사용될 수 있는 웹사이트의 일부입니다.
• 만료: 쿠키가 만료되는 날짜 및 시간입니다. 이 날짜와 시간이 지나면 쿠키는 사용자의 컴퓨터에서 삭제됩니다.
• 보안: 쿠키가 보안 연결을 통해서만 전송되어야 하는지 여부입니다. 쿠키는 사용자가 HTTPs를 통해 웹사이트에 연결된 경우에만 전송됩니다 .
• HttpOnly : JavaScript가 쿠키에 액세스할 수 있는지 여부입니다. 이는 악성 웹사이트에서 쿠키에 접근하지 못하도록 보호하는 데 도움이 됩니다.

JavaScript에서 쿠키 작업

클라이언트 측에서 데이터를 저장하고 관리하려면 JavaScript에서 쿠키를 사용하는 것이 필수적일 수 있습니다. JavaScript는 여러 가지 방법으로 쿠키 작업에 사용될 수 있습니다. 예를 들어 다음과 같은 용도로 사용할 수 있습니다.

• 쿠키 설정 및 생성
• 쿠키 데이터 검색
• 쿠키 삭제

쿠키 설정 및 생성

쿠키를 설정하거나 생성하기 위해 속성에 문자열을 할당합니다 document.cookie. 이 문자열에는 일반적으로 쿠키 이름, 해당 값 및 만료 날짜, 도메인, 경로와 같은 선택적 속성이 포함됩니다.

 

쿠키 설정 하는 방법

document.cookie = "username=Christ";

 

여기서는 "Christ" 값을 사용하여 간단한 "사용자 이름" 쿠키를 설정합니다. 그러나 이 쿠키는 세션 쿠키이므로 브라우저를 닫으면 제거됩니다.

영구 쿠키 설정:

 

const expirationDate = new Date();
expirationDate.setDate(expirationDate.getDate() + 7);  // Cookie expires in 7 days

document.cookie = "username=ChisomKanu; expires=" + expirationDate.toUTCString();

 

 

만료 날짜를 지정하여 영구 쿠키를 설정합니다. 브라우저를 닫았다가 다시 열어도 쿠키는 7일 동안 저장됩니다.

 

 

쿠키 함수 생성: 쿠키 생성을 단순화하고 프로세스를 보다 재사용 가능하게 만들기 위해 함수를 생성할 수 있습니다.

 

function setCookie(name, value, daysToExpire) {
  const date = new Date();
  date.setTime(date.getTime() + daysToExpire * 24 * 60 * 60 * 1000);
  const expires = "expires=" + date.toUTCString();
  document.cookie = name + "=" + value + "; " + expires + "; path=/";
}

// Usage:
setCookie("username", "ChisomKanu", 7); // Cookie will expire in 7 days

 

이 setCookie함수는 쿠키의 이름, 값, 쿠키가 지속되어야 하는 일수를 사용합니다. 만료 날짜를 계산하고 이에 따라 쿠키를 설정합니다.

쿠키 데이터 검색

쿠키 데이터를 검색하는 프로세스를 단계별 접근 방식으로 나누어 보겠습니다.

• 액세스 : 시작하려면 현재 문서에 대한 모든 쿠키가 포함된 속성에 document.cookie액세스합니다 .document.cookie
• 쿠키 문자열 분할: 그런 다음 메서드를 document.cookie사용하여 문자열을 개별 키-값 쌍으로 분할합니다 .split('; '). 이 방법은 세미콜론과 공백을 기준으로 쿠키를 구분합니다.
• 쿠키 객체 생성: 쿠키 데이터를 저장하기 위해 JavaScript 객체를 생성합니다. 쿠키 문자열에서 추출된 각 키-값 쌍은 이 객체에 속성으로 추가됩니다.
• 쿠키를 통한 루핑: 키-값 쌍의 배열을 반복하고 를 사용하여 각 쌍을 쿠키 이름과 값으로 추가로 분할합니다 .split('=').
• 쿠키 객체 채우기: 쿠키 이름을 키로, 해당 값을 값으로 사용하여 쿠키 객체를 채웁니다.

코드 예제를 통해 단계를 실행해 보겠습니다.

 

function getCookies() {
  const cookies = document.cookie.split('; ');
  const cookieData = {};

  for (let cookie of cookies) {
    const [name, value] = cookie.split('=');
    cookieData[name] = decodeURIComponent(value);
  }

  return cookieData;
}

const cookies = getCookies();
console.log(cookies);

 

이 getCookies함수는 를 사용하여 쿠키 문자열을 개별 쿠키 배열로 분할합니다 .split('; '). cookieData쿠키 키-값 쌍을 저장하기 위해 빈 객체를 초기화합니다 . 'for' 루프를 사용하여 배열의 각 쿠키를 반복합니다. 각 쿠키에 대해 이름과 값을 분리합니다 .split('='). decodeURIComponent또한 쿠키 값의 특수 문자를 디코딩하는 데도 사용됩니다 . cookieData그런 다음 쿠키 이름을 키로 하고 디코딩된 쿠키 값을 값으로 사용하여 객체를 채웁니다 . cookieData마지막으로 모든 쿠키 정보를 포함하는 채워진 객체를 반환합니다 .

쿠키 데이터를 JavaScript 개체로 검색한 후 해당 키를 사용하여 개별 쿠키 값에 액세스할 수 있습니다.

코드 예제를 통해 검색된 쿠키 데이터를 사용하는 프로세스를 설명해 보겠습니다.

 

function customizeUserExperience(cookies) {
  if (cookies.username) {
    console.log(`Welcome back, ${cookies.username}!`);
  } else {
    console.log('Welcome to our website!');
  }

  if (cookies.language) {
    console.log(`Displaying content in ${cookies.language}.`);
    // Additional logic to set the website language accordingly
  }
}

// Assuming cookies is the cookie object retrieved earlier
customizeUserExperience(cookies);

 

이 customizeUserExperience함수는 검색된 쿠키 개체를 인수로 사용합니다. 쿠키가 존재하는지 확인합니다 username. 그렇다면 개인화된 환영 메시지가 기록됩니다. 그렇지 않은 경우 일반적인 환영 메시지가 기록됩니다. 또한 언어 쿠키가 존재하는지 확인합니다. 그렇다면 표시된 콘텐츠 언어를 나타내는 메시지가 기록됩니다.

웹 사이트 언어를 설정하거나 검색된 다른 쿠키 값을 기반으로 사용자 인터페이스를 사용자 정의하기 위해 추가 논리를 추가할 수 있습니다.

쿠키 삭제

쿠키 삭제는 웹 개발의 중요한 측면으로, 이를 통해 개발자는 사용자 데이터와 개인정보를 효과적으로 관리할 수 있습니다. JavaScript에서는 사용자 개인 정보 보호를 강화하거나 오래된 정보를 제거하기 위해 쿠키를 삭제할 수 있습니다. 쿠키가 삭제되면 사용자의 장치에서 제거되며 브라우저는 더 이상 해당 쿠키를 서버로 보내지 않습니다. 쿠키는 사용자 작업이나 특정 데이터가 더 이상 필요하지 않은 경우 등 다양한 조건에 따라 삭제될 수 있습니다.

JavaScript를 사용하여 쿠키를 삭제하는 과정을 살펴보겠습니다.

• 액세스 document.cookie: 시작하려면 document.cookie쿠키 데이터를 조작하기 위해 속성에 액세스합니다.
• 만료 날짜를 과거로 설정: 쿠키를 삭제하려면 만료 날짜를 과거 날짜로 설정합니다. 이는 브라우저에 쿠키를 제거하라고 지시합니다.
• 경로 설정(필요한 경우): 쿠키가 처음에 특정 경로로 설정된 경우 삭제 시 일관성을 위해 동일한 경로를 사용해야 합니다.

코드 예시를 포함한 그림:

 

function deleteCookie(cookieName) {
  document.cookie = `${cookieName}=; expires=Tue, 10 Oct 2023 00:00:00 UTC; path=/;`;
}

 

이 deleteCookie함수는 쿠키 이름을 매개변수로 사용합니다. 그런 다음 함수는 document.cookie지정된 쿠키의 만료 날짜를 과거 날짜(2023년 10월 10일)로 설정하여 속성을 수정합니다. path쿠키가 초기 경로에 관계없이 삭제되도록 속성은 '/'로 설정됩니다 .

쿠키를 삭제할 때 유의해야 할 사항은 다음과 같습니다.

• 인증에 사용된 쿠키를 삭제하면 해당 사용자는 웹사이트에서 로그아웃됩니다.
• 개인화에 사용되는 쿠키를 삭제하면 사용자의 기본 설정이 재설정됩니다.
• 웹사이트의 쿠키를 모두 삭제하면 사용자는 다음에 웹사이트를 방문할 때 로그인하여 기본 설정을 다시 설정해야 합니다.