[JS] 자바스크립트로 쿠키 설정, 가져오기, 삭제 방법

쿠키란?

HTTP는 웹에서 이루어지는 모든 데이터를 주고받기 위한 서버-클라이언트 모델을 따르는 프로토콜.

쿠키는 소량의 특정 데이터를 기억하기 위해 저장하는 데이터로 사용자 컴퓨터에 저장됨

 

쿠키의 특징

• 웹 브라우저(IE, Chrome, Firefox등...)마다 쿠키가 저장되는 위치가 다름.
• 쿠키는 이름-값 쌍의 형태의 정보를 문자열로 저장함.
• 사용자의 웹 브라우저가 쿠키를 읽어서 사용자 정보 같은 데이터를 식별함.

쿠키 설정

cookieName과 cookieVal는 상황에 맞게 설정하여 사용해주시면 됨.

 

쿠키를 확인하려면 개발자 도구(F12)에 애플리케이션 - 쿠키를 보면 자세히 나와있다.

영문의 경우 Application > Cookies

path

path는 설정 할 때 path에 저장한 경로의 하위경로에서만 해당 쿠키에 접근이 가능하다.

예를들어 path를 /a로 설정하면 /a or /a/b 등의 경로에서 쿠키를 사용할 수 있다.

모든 경로에서 사용해야할 경우엔 /로 설정하면 된다.

옵션은 ;를 통하여 추가 가능하다.

function setCookie(cookieName, cookieVal) {
        document.cookie = cookieName + '=' + listString + "; path=/;"    
}

domain

설정 시 domain으로 저장한 도메인에서만 쿠키에 접근할 수 있다.

function setCookie(cookieName, cookieVal) {
        document.cookie = cookieName + '=' + listString + "; path=/; domain=localhost"
}

max-age

설정 시 max-age로 설정한 초 만큼 쿠키가 유지됨 지날경우엔 쿠키가 삭제된다.

0일경우 바로 삭제

function setCookie(cookieName, cookieVal) {
        document.cookie = cookieName + '=' + listString + "; path=/; domain=localhost; max-age=0;"
}

expires

max-age와 같이 유지되는 기간인데 expires는 날짜로 설정해준다

설정 시 설정한 날짜까지 쿠키가 유지됨 지날경우엔 쿠키가 삭제된다.

function setCookie(cookieName, cookieVal) {
        document.cookie = cookieName + '=' + listString + "; path=/; domain=localhost; expires=Tue, 19 Jan 2038 03:14:07 UTC;"
}

쿠키 얻기

쿠키를 얻는 방법

function getCookie(cookieName) {
        var cookieList = document.cookie.split("; ");
        for (var i in cookieList) {
                if(cookieList[i].split("=")[0].trim() == cookieName)
                    if (cookieList[i][cookieList[i].length - 1] != "=")
                        return cookieList[i].split("=")[1];
            }        
}

 

모든쿠키를 ;를 기준 분리하여 cookieList에 담아준 후

cookieName과 일치하는 쿠키의 value를 가져온다

 

쿠키 삭제

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

OR

function deleteCookie(cookieName) {
        document.cookie = cookieName + "=; max-age=0; path=/;";
    }

 

삭제는 쿠키의 설정에서 사용한 기간만료의 방법을 사용한다.

expires를 과거의 시간으로 해주던지, max-age를 0으로 설정하여 사용하면 된다.

 

 

틀린정보나 태클 환영입니다 !