[JavaScript] 쿠키, 세션, 로컬 스토리지 비교하기

개념

간혹 웹 사이트를 들어가 보면, '다시 보지 않기' 버튼과 함께 있는 팝업창이 뜰 때가 있다. 그때마다 우리는 팝업이 거슬린다는 이유로 '다시 보지 않기' 버튼에 체크한 뒤 팝업창을 가볍게 무시했었다. 그리고 그 팝업창은 다음에 재방문했을 때 뜨지 않았다. 아무것도 몰랐을 때는 그냥 당연한 기능인 줄 알았는데, 지금 생각해 보니까 '팝업창을 다시 안 뜨게 하는 것은 누가 기억하는 걸까?'와 같은 궁금증이 생겼다.

 

우리가 웹을 만들고 경험해 봐서 알겠지만, HTTP로 작동되는 웹은 서버와 클라이언트의 통신이 끝나면 상태를 보존하지 않는다는 특징을 가진다. 이것은 HTTP의 단점이었고, 이를 극복하고자 쿠키, 세션, 로컬 스토리지와 같은 스토리지가 등장하였다. (세션은 세션 스토리지라고도 한다. 이 글에서는 '세션'으로 통일하였다.)

 

쿠키 (Cookie)

인터넷 설정에서 기록을 지울 때, '쿠키 삭제'라는 것을 본 적이 있을 것이다. 우리에게 익숙한 쿠키는 클라이언트에 텍스트 파일로 저장되는 데이터로, 다른 스토리지와 달리 만료기간이 있기 때문에 만료기간 전까지 쿠키를 계속 유효하게 유지할 수 있다는 특징을 가진다. (쿠키는 세션, 로컬 스토리지와 다르게 웹 스토리지가 아니다.)

 

HTTP 통신은 비연결성이라는 속성을 갖고 있기 때문에, 요청과 응답이 끝나면 서버와 클라이언트 간의 연결이 끊기게 된다. 따라서 서버는 이 클라이언트가 저번에 요청을 준 클라이언트인지 아닌지 구분하기 위해 클라이언트에 쿠키를 생성해서 특정 클라이언트를 기억하는 것이다.

 

또한 쿠키는 웹 스토리지와 다르게 사용자가 요청하지 않아도 자동으로 서버에 전송된다는 특징도 가지고 있다. 이런 점과 함께 저장 위치가 클라이언트라는 이유로 쿠키는 보안 측면에서 웹 스토리지에 비해 매우 떨어진다.

 

세션 (Session)

세션과 쿠키는 다르지만 비슷해서 헷갈리기 쉽다. 쿠키와 달리 세션은 서버에 저장되며, 브라우저가 종료되면 소멸된다는 특징을 가진다. 세션은 쿠키에 비해 보안성은 높지만, 서버에 저장된다는 특징 때문에(서버의 자원을 사용하기 때문에) 속도면에서는 쿠키보다 느릴 수 있다.

 

쿠키는 클라이언트에 저장되고, 세션은 서버에 저장된다고 해서 완전 다른 개념으로 오해할 수 있는데 전혀 그렇지 않다. 세션은 그저 보안이 좋은 쿠키일 뿐이다. 앞서 말했듯이 서버가 특정 클라이언트를 식별하기 위해 만들어진 것이 쿠키라고 했었다. 하지만, 쿠키는 클라이언트에 저장되기 때문에 누군가 맘만 먹으면 쉽게 정보를 확인할 수 있다는 보안상의 큰 결함이 있다. 따라서, 정보를 클라이언트가 아닌 서버에 저장하고 클라이언트에는 세션 ID를 발급해서 서버와 통신할 때 쿠키처럼 식별이 가능하도록 하게 만든 게 세션이다.

 

로컬 스토리지 (Local Storage)

로컬 스토리지는 세션과 동일하게 작동하지만, 지속적으로 데이터를 유지한다는 점에서 큰 차이가 있다. 세션의 경우 브라우저를 종료하기만 해도 모두 소멸되지만, 로컬 스토리지는 따로 삭제해주지 않는 이상 영구적으로 서버에 남아있는다.

또한, 도메인을 기준으로 생성되며 새 창으로 2개를 띄워놔도 도메인만 같으면 동일한 데이터를 공유하게 된다. 

 

저장 방식의 차이에 있어서는 클라이언트(쿠키) VS 서버(세션, 로컬 스토리지)로 나눌 수 있겠고, 유효 기간의 차이에 있어서는 임시(세션) VS 지속(쿠키, 로컬 스토리지)로 구분할 수 있겠다.

 

사용 예시

<div id="wrap">
    <button type="button" onclick="minus()">-</button>
    <p class="num"></p>
    <button type="button" onclick="plus()">+</button>
    <button type="button" onclick="delete()">삭제</button>
</div>

쿠키와 세션, 로컬 스토리지를 활용해서 만들어볼 것은 플러스와 마이너스 기능이 있는 숫자 박스이다.

처음에 스토리지에 0이라는 값을 넣어주고, 플러스/마이너스를 누르면 현재 스토리지에 저장된 숫자값에 +1/-1을 한 값을 다시 스토리지 값으로 넣어주는 방식이다. (위의 작동 방식과 HTML 구조는 쿠키, 세션, 로컬 스토리지의 예시에서 모두 동일하게 사용했다.) 브라우저를 종료하거나 페이지를 잠시 벗어나고 돌아왔을 때도 스토리지를 통해 숫자 박스 안의 숫자가 그대로 유지되도록 구현하였다.

 

쿠키 (Cookie)

// 쿠키 저장하기
const setCookie = (name, value, exp) => {
    const date = new Date();
    date.setTime(date.getTime() + exp * 24 * 60 * 60 * 1000);
    document.cookie = `${name} = ${value}; expires = ${date.toUTCString()}; path = /`;
}

// 쿠키 불러오기
const getCookie = (name) => {
    const value = document.cookie.slice(document.cookie.indexOf('=') + 1);
    if (document.cookie.length < 1) {
        setCookie('num', 0, 1);
        document.querySelector('.num').innerText = 0;
    } else {
        document.querySelector('.num').innerText = value;
    }
}
getCookie('num');

// +1
const plus = () => {
    const getCookieValue = parseInt(document.cookie.slice(document.cookie.indexOf('=') + 1));
    const getCookieValue = getCookieValue + 1;
    setCookie('num', setCookieValue, 1);
    document.querySelector('.num').innerText = setCookieValue;
}

// -1
const minus = () => {
    const getCookieValue = parseInt(document.cookie.slice(document.cookie.indexOf('=') + 1));
    const getCookieValue = getCookieValue - 1;
    setCookie('num', setCookieValue, 1);
    document.querySelector('.num').innerText = setCookieValue;
}

// 쿠키 삭제하기
const removeCookie = (name) => {
    document.cookie = `${name} =; expires = Thu, 01 Jan 1999 00:00:10 GMT`;
}

쿠키는 document.cookie = '쿠키이름 = 쿠키값; expires = 만료기간; path = /'처럼 문자열로 설정해줘야 한다. 보통은 setCookie(쿠키이름, 쿠키값, 만료기간)라는 함수를 만들어서 간편하게 쿠키를 저장해 준다.

쿠키를 가져올 때 역시 getCookie(쿠키이름) 함수를 만들어서 쉽게 쿠키값을 불러올 수 있다.

쿠키를 삭제할 때는 기존에 쿠키를 저장하는 방법처럼 하되, 만료기간을 현재 시간보다 과거의 시간으로 설정해 주면 된다.

 

세션, 로컬 스토리지 (웹 스토리지)

// 세션 저장하기
const setSession = (name, value) => {
    sessionStorage.setTime(name, value);
}

// 세션 불러오기
const getSession = (name) => {
    if (sessionStorage.hasOwnProperty('num')){
        sessionStorage.getItem(name);
        document.querySelector('.num').innerText = sessionStorage.getItem(name);
    } else {
        document.querySelector('.num').innerText = sessionStorage.getItem(name);
    }
}
getSession('num');

// +1
const plus = () => {
    const getSessionValue = parseInt(sessionStorage.getItem('num'));
    const setSessionValue = getSessionValue + 1;
    setSession('num', setSessionValue);
    document.querySelector('.num').innerText = setSessionValue;
}

// -1
const minus = () => {
    const getSessionValue = parseInt(sessionStorage.getItem('num'));
    const setSessionValue = getSessionValue - 1;
    setSession('num', setSessionValue);
    document.querySelector('.num').innerText = setSessionValue;
}

세션과 로컬 스토리지처럼 웹 스토리지의 경우 키-값 쌍의 객체로 데이터를 저장하며, 사실상 세션과 로컬 스토리지의 사용 방식은 이름만 다를 뿐 거의 똑같다고 봐도 무방하다. (위 코드의 sessionStorage를 localStorage로 바꾸기면 하면 된다.)

 

웹 스토리지의 경우 window 객체의 프로퍼티로 존재하기 때문에, window.localStorage(sessionStorage)의 형식으로 불러올 수 있다.

쿠키는 document.cookie로 이름과 값, 만료기간, 경로까지 문자열로 넣어줘야 하는 불편함이 있었지만, 웹 스토리지는 window의 객체로서 존재하기 때문에 직관적이고 사용성이 더 좋다는 장점이 있다.

 

1. 쿠키는 클라이언트에 저장되며, 만료기간이 있음. 보안성이 떨어지며 가벼운 데이터 저장에 좋음.
2. 세션은 서버에 저장되며, 브라우저를 종료하면 모두 소멸되기 때문에 일시적인 데이터를 저장할 때 좋음.
3. 로컬 스토리지는 서버에 저장되며, 동일 도메인을 기준으로 데이터를 지속적으로 저장함.
4. 쿠키는 document.cookie = 'name=value; expires=; path=;'
5. 세션은 window.sessionStorage, 로컬 스토리지는 window.localStorage 객체를 사용.