JavaScript로 쿠키 생성하고 읽는 방법 – 실전 예제와 함께 배우기

웹 개발에서 쿠키(Cookie)는 사용자 정보를 브라우저에 저장하고 필요할 때 다시 불러오는 데 사용되는 핵심 기술입니다. 이 글에서는 JavaScript를 활용해 쿠키를 생성하는 방법과 저장된 쿠키 값을 읽어오는 방법을 실제 코드 예제와 함께 자세히 알아보겠습니다.

쿠키 생성하기

JavaScript에서 쿠키를 만드는 가장 간단한 방법은 document.cookie 객체에 문자열 값을 할당하는 것입니다. 기본 형식은 다음과 같습니다.

document.cookie = "key1=value1;key2=value2;expires=date";

여기서 expires 속성은 선택 사항입니다. 유효한 날짜나 시간을 지정하면 해당 시점에 쿠키가 만료되며, 그 이후에는 더 이상 쿠키 값에 접근할 수 없습니다. expires를 지정하지 않으면 브라우저 세션이 종료될 때 쿠키가 함께 삭제되는 세션 쿠키가 됩니다.

예제: 고객 이름을 쿠키에 저장하기

아래 예제는 입력 필드에 작성한 고객 이름을 쿠키로 저장하는 코드입니다. 버튼을 클릭하면 WriteCookie() 함수가 실행되어 쿠키가 설정됩니다.

<html>
   <head>
      <script>
         function WriteCookie() {
            if( document.myform.customer.value == "" ) {
               alert("값을 입력해 주세요!");
               return;
            }
            cookievalue = escape(document.myform.customer.value) + ";";
            document.cookie = "name=" + cookievalue;
            document.write("설정된 쿠키 : " + "name=" + cookievalue);
         }
      </script>
   </head>
   <body>
      <form name="myform" action="">
         이름 입력: <input type="text" name="customer"/>
         <input type="button" value="쿠키 설정" onclick="WriteCookie();"/>
      </form>
   </body>
</html>

코드 설명:

입력값이 비어 있는지 먼저 확인하여, 비어 있으면 경고창을 띄우고 함수를 종료합니다.
escape() 함수는 특수문자를 인코딩하여 쿠키 값이 안전하게 저장되도록 도와줍니다.
마지막으로 document.cookie에 name=값 형태의 문자열을 할당해 쿠키를 생성합니다.

쿠키 읽기

쿠키를 읽는 것은 생성만큼이나 간단합니다. document.cookie 객체의 값 자체가 곧 쿠키 내용이기 때문입니다. 이 문자열은 세미콜론(;)으로 구분된 name=value 쌍의 목록 형태로 되어 있으며, 언제든 이 문자열에 접근해 원하는 쿠키 값을 찾을 수 있습니다.

예제: 저장된 쿠키 값 가져오기

아래 코드를 실행하고 버튼을 클릭하면 현재 저장된 모든 쿠키를 읽어 화면에 출력합니다.

<html>
   <head>
      <script>
         function ReadCookie() {
            var allcookies = document.cookie;
            document.write("전체 쿠키 : " + allcookies);

            // 모든 쿠키 쌍을 배열로 분리
            cookiearray = allcookies.split(';');

            // 배열에서 키와 값을 추출
            for(var i=0; i<cookiearray.length; i++) {
               name = cookiearray[i].split('=')[0];
               value = cookiearray[i].split('=')[1];
               document.write("키 : " + name + " / 값 : " + value);
            }
         }
      </script>
   </head>
   <body>
      <form name="myform" action="">
         <p>아래 버튼을 클릭하고 결과를 확인해 보세요:</p>
         <input type="button" value="쿠키 가져오기" onclick="ReadCookie()"/>
      </form>
   </body>
</html>

동작 원리:

document.cookie로 전체 쿠키 문자열을 가져옵니다.
split(';')을 사용해 각 쿠키 쌍을 배열 요소로 분리합니다.
반복문 안에서 다시 split('=')으로 키와 값을 나눈 뒤 출력합니다.

추가 팁: 쿠키 만료일 지정하기

쿠키가 브라우저에 오래 유지되길 원한다면 만료일을 직접 지정할 수 있습니다. 아래처럼 Date 객체를 활용하면 됩니다.

var now = new Date();
now.setTime(now.getTime() + 30 * 24 * 60 * 60 * 1000); // 30일 후
var expiry = "expires=" + now.toUTCString();
document.cookie = "name=" + cookievalue + ";" + expiry + ";path=/";

이렇게 하면 쿠키가 30일간 유지되며, path=/ 옵션을 추가하면 사이트 전체에서 쿠키에 접근할 수 있습니다.

정리

JavaScript에서 쿠키를 다루는 기본 원리는 document.cookie 하나로 요약됩니다. 값을 할당하면 생성, 값을 읽으면 조회가 됩니다. 다만 실무에서는 쿠키 파싱을 편하게 해주는 헬퍼 함수나 js-cookie 같은 라이브러리를 활용하면 더욱 깔끔하게 관리할 수 있습니다. 로그인 상태 유지, 사용자 환경설정 저장 등 다양한 용도로 쿠키를 적극 활용해 보세요.