JavaScript 및 jQuery를 사용하여 쿠키 생성, 읽기 및 삭제

Neha Imran 2023년10월12일

jQuery jQuery Cookie

쿠키란?
JavaScript를 사용하여 쿠키 생성, 읽기 및 삭제
jQuery를 사용하여 쿠키 생성, 읽기 및 삭제

JavaScript 및 jQuery를 사용하여 쿠키 생성, 읽기 및 삭제

이 문서는 브라우저의 쿠키에 관한 것입니다. 쿠키와 쿠키의 다양한 속성에 대해 알아야 할 모든 것을 배웁니다.

나중에 JavaScript와 jQuery를 사용하여 쿠키를 만들고 읽고 삭제할 것입니다.

쿠키란?

쿠키는 데이터가 포함된 컴퓨터의 텍스트 파일입니다. 웹 서버는 웹 페이지를 브라우저에 보낸 후 연결을 종료하고 사용자에 대해 완전히 잊어버립니다.

사용자 정보를 기억하는 방법은 쿠키가 해결하기 위해 생성된 문제였습니다.

쿠키는 이후 웹사이트 방문을 위해 사용자의 이름이나 사용자 ID를 기억합니다. 쿠키는 키-값 쌍으로 생성되고 검색됩니다.

온라인 상점에 대해 말할 때 사용자가 선택에 많은 시간을 소비한 후 장바구니에 일부 항목을 추가하고 로그인하지 않은 경우 데이터베이스는 데이터를 저장하지 않습니다.

사용자가 브라우저를 종료하고 같은 페이지를 다시 열면 카트가 비어 있어 짜증날 수 있습니다. 그런 다음 쿠키는 사용자 정보를 저장하고 현재 상태를 유지하여 문제를 해결합니다.

웹사이트의 사용 가능한 쿠키를 보려면 검사로 이동하거나 Ctrl+Shift+I를 누르십시오. 그런 다음 응용 프로그램 탭으로 이동합니다.

Storage 아래 Cookies 섹션이 표시됩니다. 다음과 같습니다.

쿠키 구조

여기에는 여러 필드가 표시됩니다. 다음은 쿠키의 속성입니다.

이러한 각 속성을 자세히 살펴보겠습니다.

이름 - 쿠키의 이름입니다.
값 - 쿠키의 값입니다.
도메인 - 웹사이트의 도메인입니다.
경로 - 쿠키가 설정된 웹 페이지 또는 디렉토리의 URL입니다. 디렉토리 또는 페이지에서 쿠키를 검색하려면 이 항목을 비워두십시오.
만료/최대 연령 - 쿠키가 삭제되는 쿠키의 만료 날짜입니다.
크기 - 쿠키의 크기입니다.
HttpOnly - HttpOnly 속성이 있는 쿠키는 JavaScript Document.cookie에서 사용할 수 없습니다. 서버로만 전달됩니다.
보안 - 이 필드에 "보안"이라는 단어가 포함된 경우 보안 서버를 통해서만 쿠키에 액세스할 수 있습니다. 이 필드를 비워두면 그러한 제한이 없습니다.
SameSite - 이 기능을 사용하면 서버가 교차 사이트 요청과 함께 쿠키를 보낼지 여부를 선언할 수 있습니다. 이는 교차 사이트 요청 위조 공격(CSRF)의 위험을 완화합니다. 이 매개변수에는 Strict, Lax 및 None의 세 가지 옵션이 있습니다.
파티션 키 - 쿠키의 파티션 키 역할을 하도록 쿠키를 설정하는 엔드포인트에 처음 요청을 보냈을 때 브라우저의 최상위 URL이 켜져 있었습니다.
우선 순위 - 쿠키 우선 순위를 사용하면 서버에서 우선 순위가 낮은 이전 쿠키를 삭제하고 우선 순위가 높은 이전 쿠키를 더 오래 유지할 수 있습니다.

JavaScript를 사용하여 쿠키 생성, 읽기 및 삭제

JavaScript를 사용하면 당사 웹사이트에서 쿠키를 설정하고 읽고 지우는 것이 매우 간단해집니다. 문서 속성 쿠키를 사용하여 문서와 관련된 쿠키를 읽고 쓸 수 있습니다.

쿠키 값에 대한 getter 및 setter 역할을 합니다.

쿠키 만들기

document.cookie를 사용하여 JavaScript에서 쿠키를 생성하고 여기에 키-값 쌍을 할당할 수 있습니다.

document.cookie = 'title=developer; expires=Mon, 21 Nov 2022 12:00:00 UTC;';

위 문장을 실행하면 브라우저에 쿠키가 생성됩니다. 키-값 쌍의 각 값을 지정했습니다.

또한 만료 날짜를 언급하지 않으면 브라우저가 닫힐 때 쿠키가 삭제되기 때문에 만료 날짜를 설정합니다. 쿠키의 주요 목적은 정보를 저장하는 것이므로 만료 날짜를 언급해야 합니다.

브라우저에서 쿠키를 봅시다.

쿠키 생성

출력에 표시된 대로 지정된 키와 값이 있는 쿠키가 생성됩니다. 단일 웹사이트에서 서로 다른 키-값 쌍으로 여러 쿠키를 생성할 수 있습니다.

각 쿠키는 다른 정보를 저장하는 데 사용될 수 있습니다.

세 개의 쿠키를 만들고 싶다고 가정해 보겠습니다. 하나는 이름, 두 번째는 나이, 세 번째는 사람의 성별에 대한 정보를 포함합니다. 아래 코드를 확인하십시오.

document.cookie = 'name=John; expires=Mon, 21 Nov 2022 12:00:00 UTC';
document.cookie = 'Age=25; expires=Mon, 21 Nov 2022 12:00:00 UTC';
document.cookie = 'Gender=Male; expires=Mon, 21 Nov 2022 12:00:00 UTC';

이 문은 브라우저에 세 개의 쿠키를 생성합니다. 아래 출력을 살펴보십시오.

여러 쿠키

document.cookie 문을 사용하여 원하는 만큼 쿠키를 생성할 수 있습니다. 하지만 이 문구를 반복적으로 쓰는 것은 단조로운 과정처럼 들리므로 일반적인 방법을 만들어 봅시다.

쿠키를 생성하는 함수를 생성하려면 아래 코드를 관찰하십시오.

function createCookie(name, value, ex_days) {
  if (ex_days) {
    const date = new Date();
    date.setTime(date.getTime() + (ex_days * 24 * 60 * 60 * 1000));
    var expires = 'expires=' + date.toUTCString();
  } else {
    var expires = '';
  }
  document.cookie = name + '=' + value + ';' + expires + ';';
}

createCookie 함수는 세 개의 인수를 받습니다. 첫 번째는 이름입니다.

그것이 열쇠라고 가정할 수 있습니다. 두 번째는 값이고 세 번째는 만료 기간입니다.

createCookie("CookieKey", "CookieValue", 50)와 같은 함수를 호출할 수 있습니다. CookieKey라는 이름으로 쿠키를 생성하고 CookieValue를 해당 값으로 설정합니다.

만료일은 현재 날짜로부터 다음 50일로 설정됩니다.

쿠키 읽기

JavaScript를 사용하여 웹사이트에 설정한 쿠키를 빠르게 읽을 수 있습니다. 키-값 쌍으로 저장하기 때문에 쿠키에 액세스할 때 키-값 쌍을 얻습니다.

쿠키를 읽는 방법을 배우려면 아래 코드를 관찰하십시오.

document.write(document.cookie);

위의 코드에서 볼 수 있듯이 document.cookie 명령을 사용하여 웹 사이트에서 사용 가능한 모든 쿠키를 검색합니다.

생성한 모든 쿠키를 검색해 보겠습니다. 아래 출력을 보십시오.

쿠키 읽기

이전에 언급한 것처럼 모든 쿠키는 키-값 쌍으로 얻습니다. 쿠키를 쉽게 읽을 수 있습니다.

이제 몇 가지 놀라운 내용에 대해 자세히 알아보겠습니다. document.cookie 문은 웹사이트의 쿠키 목록을 제공하지만 특정 쿠키를 읽으려면 어떻게 해야 할까요?

하나의 쿠키를 읽는 방법을 알아봅시다. 간단합니다. 지정된 쿠키를 검색하는 함수를 만들 것입니다.

아래 코드를 확인하십시오.

function getCookie(cookie_name) {
  let name = cookie_name + '=';
  let cookie_array = document.cookie.split(';');
  for (let i = 0; i < cookie_array.length; i++) {
    let cookie = cookie_array[i];
    while (cookie.charAt(0) == ' ') {
      cookie = cookie.substring(1);
    }
    if (cookie.indexOf(name) == 0) {
      return cookie.substring(name.length, cookie.length);
    }
  }
  return '';
}

쿠키 만들기 섹션에서 생성한 세 개의 쿠키에서 이 코드를 테스트합니다. getCookie 기능에 대해 혼란스러울 수 있습니다.

괜찮아요. 각 코드 줄을 자세히 설명하면 이 방법을 명확하게 이해할 수 있습니다.

쿠키 이름을 함수에 전달하여 지정된 쿠키의 세부 정보를 이름으로 가져옵니다.
쿠키에 정보를 키-값 쌍으로 저장합니다. 이름을 값과 함께 저장하려면 Name="CookieName"이라고 씁니다. 쿠키를 검색하면 동일한 값을 얻게 됩니다.
먼저 지정된 쿠키 이름에 =를 추가하여 검색해야 합니다. 우리는 코드의 첫 번째 줄에서 동일한 작업을 수행했습니다.
다음으로 쿠키 배열을 탐색하여 필요한 쿠키를 찾으려면 쿠키 배열이 필요합니다. document.cookie를 통해 모든 쿠키를 얻는다고 가정합니다. 배열이 아닌 문자열을 받게 됩니다.

따라서 document.cookie.split(';')을 사용하여 배열을 가져옵니다. 우리는 다음 배열을 얻을 것입니다.
다음 단계에서는 배열의 각 쿠키를 순회하는 for 루프를 생성했습니다. 작업을 수행하기 위해 cookie 변수에 모든 쿠키를 저장하고 있습니다.
for 루프 내부의 while 루프는 중요합니다. 존재하는 경우 현재 쿠키에서 추가 공간을 제거하고 있습니다.

위의 배열을 관찰하면 Age 및 Gender 쿠키 모두에 공백이 있습니다. while 루프는 이러한 여분의 공백을 제거합니다.
마지막으로 자바스크립트의 indexOf() 메서드를 사용하여 주어진 매개변수가 처음 나타나는 인덱스를 제공합니다. 매개 변수로 쿠키 이름을 전달하고 인덱스가 0인지 확인한 다음 필요한 쿠키를 찾았습니다.

쿠키 삭제

JavaScript를 사용하면 쿠키를 간단하게 삭제할 수 있습니다. 쿠키의 만료 날짜를 이전 날짜로 설정하면 쿠키는 자동으로 파기됩니다.

쿠키를 생성할 때 만료 날짜를 지정하지 않은 경우에도 종료 날짜 값을 더 이른 시간으로 변경하여 쿠키를 삭제할 수 있습니다.

현재 브라우저에는 Age, gender 및 name의 세 가지 쿠키가 있습니다. Gender 쿠키를 제거해 보겠습니다.

다음 명령은 Gender 쿠키를 생성했습니다.

document.cookie = 'Gender=Male; expires=Mon, 21 Nov 2022 12:00:00 UTC';

만료일은 2022년 11월 21일입니다. 날짜를 현재 날짜보다 이전 날짜로 변경하면 쿠키가 삭제됩니다.

만료 날짜를 2000년 1월 1일로 설정했다고 가정합니다. 이제 브라우저에서 어떤 쿠키를 사용할 수 있는지 살펴보겠습니다.

쿠키 삭제

jQuery를 사용하여 쿠키 생성, 읽기 및 삭제

지금까지 JavaScript를 사용하여 쿠키를 만들고 읽고 삭제하는 방법에 대해 이야기했습니다. 이 섹션에서는 jQuery를 사용하여 동일한 세 가지 기능을 살펴보겠습니다.

JavaScript 라이브러리 jQuery를 사용하면 JavaScript를 매우 간단하게 사용할 수 있습니다.

jQuery가 작동하는 방식과 쿠키를 만들고 읽고 삭제하는 데 JavaScript보다 사용하기 쉬운 방법에 대해 설명합니다. jquery-cookie 라이브러리를 사용하여 쿠키에 대한 작업을 생성하고 수행합니다.

쿠키 만들기

jQuery의 cookie 라이브러리는 이름과 값을 제공하여 쿠키를 생성하는 cookie() 메서드를 제공합니다.

통사론:

$.cookie('name', 'value', {settings});

이 방법에는 세 가지 매개변수가 있습니다.

이름 - 쿠키의 키입니다.
값 - 쿠키의 값입니다.
설정 - 추가 쿠키 매개변수를 지정하는 데 사용할 수 있는 개체입니다.

jQuery가 쿠키를 생성하는 방법을 보려면 아래 코드를 확인하십시오.

<html>
    <head>
        <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.js"></script>
        <script>
            $.cookie("Title","Developer");
        </script>
    </head>
    <body></body>
</html>

출력:

jquery 쿠키 생성

Title이라는 이름과 Developer라는 값을 가진 쿠키가 생성되었습니다. 이 쿠키에 대한 만료 날짜를 지정하지 않았으며 출력에서 볼 수 있듯이 만료 열에 만료 날짜에 대한 언급이 없습니다.

이제 방금 만든 쿠키의 만료 날짜를 설정합니다. 방법은 다음과 같습니다.

<html>
    <head>
        <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.js"></script>
        <script>
            $.cookie("Title", "Developer", { expires: 20 });
        </script>
    </head>
    <body></body>
</html>

출력:

쿠키 만료

만료 날짜를 20으로 설정했기 때문에 만료 열에 나열된 만료 날짜를 볼 수 있습니다. 즉, 이 쿠키는 현재 날짜로부터 20일 후에 만료됩니다.

쿠키 읽기

JavaScript와 달리 jQuery를 사용하면 쿠키를 읽는 것이 더 쉽습니다. JavaScript에서는 특정 쿠키를 읽는 함수를 구성해야 했습니다.

그러나 jQuery에는 이름을 인수로 전달하여 필요한 쿠키를 읽을 수 있는 내장 함수가 있습니다.

$.cookie("CookieName") 메서드는 특정 쿠키를 읽는 데 사용됩니다. 아래 코드를 살펴보십시오.

<html>
    <head>
        <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.js"></script>
        <script>
            var cookie = $.cookie("Title");
            document.write(cookie);
        </script>
    </head>
    <body></body>
</html>

생성된 쿠키의 이름인 제목을 매개변수로 함수에 전달했습니다. Developer라는 값을 반환해야 합니다.

출력을 살펴보십시오.

쿠키 읽기

쿠키 삭제

jQuery의 사용 편의성 측면에서 이름으로 쿠키를 제거하는 removeCookie()라는 메서드가 있습니다. JavaScript에는 쿠키를 지우는 내장 기능이 없습니다.

삭제하려면 만료 날짜를 더 이른 날짜로 설정해야 합니다. 쿠키를 삭제하려면 아래 코드를 살펴보십시오.

<html>
    <head>
        <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.js"></script>
        <script>
            $.removeCookie("Title");
        </script>
    </head>
    <body></body>
</html>

쿠키란?

JavaScript를 사용하여 쿠키 생성, 읽기 및 삭제

쿠키 만들기

쿠키 읽기

쿠키 삭제

jQuery를 사용하여 쿠키 생성, 읽기 및 삭제

쿠키 만들기

쿠키 읽기

쿠키 삭제

관련 문장 - jQuery Cookie