쿠키(cookie) 저장 및 삭제

쿠키(cookie)란?

쿠키는 서버를 대신해 웹 브라우저에서 요청할때 그 정보를 서버에 보내 사용자를 식별 할수 있게 도와줍니다.

 

쿠키는 사용자의 웹 브라우저에 저장되고 데이터 형태는 Key, Value 형태로 방문자의 물리적인 저장소(HDD, SSD)와 브라우저에 저장됩니다.

 

쿠키를 사용하는 곳

• 쿠키는 주로 최근에 본 페이지나, 아이디 저장등을 저장할 수 있도록 합니다.
• 인증 관련된 정보, 세션에 저장된 토큰 값 등 보안에 필요한 정보를 저장할 수도 있습니다.

 

쿠키 자바스크립트 사용 예제

쿠키 설정

function setCookie(name, value, expiredays) {
    var today = new Date();
    today.setDate(today.getDate() + expiredays); //만료값 지정
    
    var cookie_value = escpae(value) + "; exexpires=" + today,toGMtoday() + ";"; 
    document.cookie = nmae + "=" + cookie_value; 
}

 

nickName이란 이름으로 soso를 7일 동안 저장하고 싶다면 이렇게 하면 된다.

setCookie("nickName", "soso", "7");

 

쿠키를 가져오기

function getCookie(name) {  
   var nameOfCookie = name + "=";  
   var x = 0;  
   while (x <= document.cookie.length) {  
       var y = (x + nameOfCookie.length);  
       if (document.cookie.substring(x, y) == nameOfCookie) {  
           if ((endOfCookie = document.cookie.indexOf(";", y)) == -1 )  
               endOfCookie = document.cookie.length;  
           return unescape(document.cookie.substring(y, endOfCookie));  
       }  
       x = document.cookie.indexOf(" ", x) + 1;  
       if (x == 0) break;  
   }  
   return "";  
}

 

자바 예제 소스

쿠키 생성하기

public void setCookie(HttpServletResponse res, String value) {
    Cookie cookie = new Cookie("내가 생성하려는 쿠키 ID", value); // 쿠키 이름 지정하여 생성( key, value 개념)
    cookie.setMaxAge(60 * 60 * 24); //쿠키 유효 기간: 하루로 설정(60초 * 60분 * 24시간)
    cookie.setPath("/"); //모든 경로에서 접근 가능하도록 설정
    res.addCookie(cookie); //response에 Cookie 추가
}

 

쿠키 가져오기

public String getCookie(HttpServletRequest req) {
    Cookie[] cookies=req.getCookies(); // 모든 쿠키 가져오기
    if(cookies!=null) {
        for (Cookie c : cookies) {
            String name = c.getName(); // 쿠키 이름 가져오기
            String value = c.getValue(); // 쿠키 값 가져오기
            if (name.equals("내가 찾으려는 쿠키 ID")) {
                return value;
            }
        }
    }
    return null;
}

 

특정 쿠키 제거

public void deleteCookie(HttpServletResponse res) {
    Cookie cookie = new Cookie("삭제하고 싶은 쿠키 ID", null); // 삭제할 쿠키에 대한 값을 null로 지정
    cookie.setMaxAge(0); // 유효시간을 0으로 설정해서 바로 만료시킨다.
    res.addCookie(cookie); // 응답에 추가해서 없어지도록 함
}

 

모든 쿠키 제거

public void deleteCookie(HttpServletResponse res) {
    Cookie cookie = new Cookie("삭제하고 싶은 쿠키 ID", null); // 삭제할 쿠키에 대한 값을 null로 지정
    cookie.setMaxAge(0); // 유효시간을 0으로 설정해서 바로 만료시킨다.
    res.addCookie(cookie); // 응답에 추가해서 없어지도록 함
}

 

추가로

 

기존 쿠키는 항상 HTTP 요청시 헤더에 담겨 전송하는 방식이기 때문에 요청이 많을 수록 쿠키의 전송 횟수가 늘어나며, 웹 서비스 성능에 영향을 줄 수 있다.

html5에서 세션스토리지 및 로컬 스토리지를 지원하면서 이런한 단점을 개선했다고 합니다.

 

세션스토리지(sessionStorage)

• 세션 종료시 데이터가 만료된다.

로컬 스토리지 (localStorage)

• 사이트 재 방문 시에 이전에 저장되었던 정보를 이용 할 수 있다. 

 

자바스크립트 예제소스

window.sessionStorage.setItem('Key', 'Value'); // Set Key - Value
window.sessionStorage.getItem('Key'); // Get Value
window.sessionStorage.removeItem('Key'); //Delete
window.sessionStorage.clear(); // Clear

window.localStorage.setItem('Key', 'Value'); // Set Key - Value
window.localStorage.getItem('Key'); // Get Value
window.localStorage.removeItem('Key'); //Delete
window.localStorage.clear(); // Clear