JavaScript : cookie 쿠키를 생성, 읽기, 삭제 (create, read, delete) 및 추천 라이브러리(js-cookie)

 

 

 

이번 소개에서 한 번도 다루지 않은 것은 가장 오래되고 논란이 많은 웹 API 중 하나인 cookie 입니다! 우리 모두 알다시피, 최근 몇 년 동안 IndexDB와 웹 스토리지(localStorage와 세션스토리지 사용)와 같은 최신 웹 API가 일반적으로 사용되고 있습니다.

대용량 데이터에는 이러한 최신 기술이 권장되지만, JavaScript를 통해 cookie에 액세스하고 cookie를 생성하는 방법을 숙지하는 것이 좋습니다. 이제 cookie로 할 수 있는 네 가지 기본적인 작업에 대해 자세히 알아보겠습니다.

 

 

cookie 설정하기

 

cookie 를 설정하려면 cookie 를 읽고 쓸 수 있는 document.cookie 속성을 사용할 수 있습니다. cookie를 설정하려면 document.cookie에 이름=값 형식에 따라 문자열 값을 할당합니다. 다음은 예시입니다:

document.cookie = "username=John Doe";

cookie 가 생성되면 동일한 속성을 통해 cookie 에 액세스할 수 있습니다.

 

cookie 읽기

 

cookie를 읽으려면 동일한 document.cookie 속성에 액세스할 수 있습니다. 이 속성은 현재 문서와 연결된 모든 cookie 가 포함된 문자열을 반환하며, cookie 를 세미콜론으로 구분합니다. 특정 cookie 값을 추출하려면 아래와 같이 문자열을 파싱해야 합니다:

 

let cookies = document.cookie.split(";");

for (let cookie of cookies) {
  let trimmedCookie = cookie.trim();
  if (trimmedCookie.startsWith("username=")) {
    let username = trimmedCookie.substring(
      "username=".length
    );

    console.log("Username: " + username);
  }

 

보시다시피 cookie 는 사용하기 직관적이지 않기 때문에 다른 데이터 저장 형식이 더 많이 사용되는 이유 중 하나입니다.

 

cookie 값 가져오기

 

cookie  값에 직접 액세스하려면 helper 함수(getCookieValue) 를 만들어 사용하여 cookie 이름을 기반으로 값을 검색할 수 있습니다.

function getCookieValue(cookieName) {
  let cookies = document.cookie.split(";");

  for (let cookie of cookies) {
    let trimmedCookie = cookie.trim();
    if (trimmedCookie.startsWith(cookieName + "=")) {
      return trimmedCookie.substring(
        cookieName.length + 1
      );
    }
  }

  return null; // Cookie not found
}

let username = getCookieValue("username");
console.log("Username: " + username);

 

가독성을 위해 위의 코드를 형식화했지만 요점을 파악할 수 있을 것입니다. cookie 에 액세스하는 것이 얼마나 복잡할 수 있는지, 왜 이런 종류의 작업을 할 때 작은 라이브러리를 사용하는 것이 훨씬 더 나은지 다시 한 번 확인할 수 있습니다!

 

cookie 만료설정

 

마지막으로 cookie를 만료하려면 만료일을 과거 날짜로 설정하면 됩니다. 이렇게 하면 다음 코드에서와 같이 브라우저가 cookie 를 제거합니다:

 

function deleteCookie(cookieName) {
  document.cookie = cookieName + "=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
}

deleteCookie("username");

 

다시 한 번 말하지만, 이 모든 작업을 백그라운드에서 처리하는 작은 라이브러리가 있다면 간단한 API로 작업하는 것이 훨씬 쉬울 것입니다. 하지만 JavaScript를 사용하기 전에 cookie 로 직접 작업해 본 적이 없다면 위의 코드 예제를 통해 cookie가 어떻게 생성되고 액세스되는지 대략적으로 파악할 수 있을 것입니다.

위의 코드를 데모하고 싶다면 아무 웹 페이지로 이동하여 브라우저 콘솔에 해당 코드 조각을 입력하면 예상한 결과를 어느 정도 얻을 수 있습니다(페이지에 cookie 가 이미 설정되어 있는 경우 출력 결과가 다를 수 있음).

 

 

 

---

cookie 기능 확장하기

 

좀 더 기능을 확장하여, 만료 일자 지정해서 cookie 를 사용하는 방법입니다. days 에 미래의 +일수를 지정하면 cookie 만료시간을 설정할 수 있습니다.

 

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

 

cookie 을 읽기 위해 설정시 사용했던 키값을 호출하여 값을 얻습니다.

function getCookie(name) {
  var nameEQ = name + "=";
  var cookies = document.cookie.split(';');
  for (var i = 0; i < cookies.length; i++) {
    var cookie = cookies[i];
    while (cookie.charAt(0) === ' ') {
      cookie = cookie.substring(1, cookie.length);
    }
    if (cookie.indexOf(nameEQ) === 0) {
      return cookie.substring(nameEQ.length, cookie.length);
    }
  }
  return null;
}

 

cookie 값을 강제로 삭제하는 방법입니다. -1 을 지정하여 과거 날짜로 지정하게 하여 만료기간이 되게끔 처리 합니다.

function deleteCookie(name) {
  setCookie(name, "", -1);
}

 

활용하기

// 쿠키 생성
setCookie("username", "John Doe", 7);

// 쿠키 읽기
var username = getCookie("username");
console.log(username); // 출력: "John Doe"

// 쿠키 삭제
deleteCookie("username");

 

 

---

js-cookie

 

js-cookie 라는 라이브러리 존재합니다. 이는 브라우저 cookie 처리를 위한 간단하고 가벼운 JavaScript API 로 보시면 됩니다. 더 많은 설명은 아래 링크 주소에 들어가면 상세히 기술되어 있으니 참고하시길 바랍니다. 

 

<script src="https://cdn.jsdelivr.net/npm/js-cookie@3.0.5/dist/js.cookie.min.js"></script>

 

1> 쿠키값 설정

// default 사이트 전체에서 확인 가능
Cookies.set('name', 'value')

// 7일 뒤 쿠키 만료
Cookies.set('name', 'value', { expires: 7 })

// 7일 뒤 쿠키 만료 + 현재 경로에서만 확인 가능
Cookies.set('name', 'value', { expires: 7, path: '' })

2> 쿠키값 가져오기

Cookies.get('name')	// 'value'
Cookies.get('phone')	// undefined
Cookies.get()	// { name: 'value' }

3> 쿠키값 삭제하기

// path 지정하지 않은 경우
Cookies.remove('name')

// path 지정한 경우 {path: ''} 쿠키가 현재 경로에 있기 때문에 현재 경로에서만 remove 해야함
Cookies.remove('name', {path: ''})

 

 

https://github.com/js-cookie/js-cookie

GitHub - js-cookie/js-cookie: A simple, lightweight JavaScript API for handling browser cookies

 

https://www.jsdelivr.com/package/npm/js-cookie

jsDelivr - A free, fast, and reliable CDN for JS and Open Source

 

 

https://webtoolsweekly.com/

Web Tools Weekly | A Weekly Newsletter for Front-end Developers