Computer >> 컴퓨터 >  >> 프로그래밍 >> HTML

HTML DOM cookie 속성 완벽 정리 – 자바스크립트로 쿠키 생성·읽기·삭제하기

HTML DOM의 cookie 속성은 웹 브라우저에서 쿠키를 생성하고, 읽고, 삭제하는 데 사용됩니다. 쿠키는 웹사이트가 사용자별 정보를 저장하고 추적할 수 있도록 도와주는 작은 데이터 조각입니다.

cookie 속성의 반환값은 문자열(string) 타입이며, 세미콜론(;)으로 구분된 모든 쿠키 목록을 포함합니다. 각 쿠키는 key=value 형태의 키-값 쌍으로 구성됩니다. 기본적으로 쿠키는 브라우저가 닫히는 즉시 삭제되지만, 만료 날짜(expiry date)를 지정하면 원하는 기간 동안 유지할 수 있습니다.

문법(Syntax)

cookie 속성을 설정하는 기본 문법은 다음과 같습니다.

document.cookie = newCookie

여기서 newCookie는 문자열 타입이며, 세미콜론으로 구분된 이름-값(name-value) 쌍의 목록입니다. newCookie에 사용할 수 있는 선택적 옵션 값은 아래와 같습니다.

매개변수설명
expires=date쿠키의 만료 날짜를 GMT 형식으로 지정합니다. 이 값을 설정하지 않으면 브라우저가 닫히는 즉시 쿠키가 삭제됩니다(세션 쿠키).
path=path쿠키가 저장되고 유효한 디렉터리 경로를 지정합니다. 절대 경로만 사용해야 합니다.
domain=domainname쿠키가 유효한 웹사이트의 도메인을 지정합니다. 값을 생략하면 현재 문서의 도메인이 사용됩니다.
Secure브라우저가 HTTPS 프로토콜을 통해서만 서버에 쿠키를 전송하도록 지정합니다. 보안이 중요한 데이터에 권장됩니다.

예제(Example)

HTML DOM cookie 속성의 실제 사용 예제를 살펴보겠습니다.

<!DOCTYPE html>
<html>
<body>
<h1>javascript COOKIE example</h1>
<p>아래 버튼을 클릭하여 쿠키를 생성하세요</p>
<button type="button" onclick="cookieCreate()">CREATE</button>
<p id="Sample"></p>
<script>
    function cookieCreate(){
        var x=document.cookie;
        x="username=Matt;class=prior;location=USA;expires=Wed, 10 July 2019 12:00:00 UTC";
        document.getElementById("Sample").innerHTML="The cookie values are : "+x;
    }
</script>
</body>
</html>

실행 결과(Output)

위 코드를 실행하면 다음과 같은 화면이 출력됩니다.

HTML DOM cookie 속성 완벽 정리 – 자바스크립트로 쿠키 생성·읽기·삭제하기

CREATE 버튼을 클릭하면:

HTML DOM cookie 속성 완벽 정리 – 자바스크립트로 쿠키 생성·읽기·삭제하기

예제 코드 분석

위 예제의 동작 방식을 단계별로 살펴보겠습니다.

먼저, 사용자가 클릭하면 cookieCreate() 함수를 실행하는 CREATE 버튼을 생성합니다.

<button type="button" onclick="cookieCreate()">CREATE</button>

cookieCreate() 함수는 document 객체의 cookie 속성을 사용하여 쿠키를 생성합니다. 세미콜론으로 구분된 여러 개의 키-값 쌍(username, class, location)과 함께 만료 날짜(expires)까지 지정한 것을 확인할 수 있습니다. 마지막으로 생성된 쿠키 정보는 innerHTML 속성을 통해 id가 "Sample"인 단락(<p>)에 출력됩니다.

function cookieCreate(){
    var x=document.cookie;
    x="username=Matt;class=prior;location=USA;expires=Wed, 10 July 2019 12:00:00 UTC";
    document.getElementById("Sample").innerHTML="The cookie values are : "+x;
}

마무리

HTML DOM의 cookie 속성은 별도의 라이브러리 없이 순수 자바스크립트만으로 쿠키를 다룰 수 있는 강력한 기능입니다. 로그인 상태 유지, 사용자 환경설정 저장 등 다양한 용도로 활용되며, expires 옵션을 적절히 활용하면 쿠키의 유지 기간을 자유롭게 제어할 수 있습니다.