[Web] 🍪 Cookie와 Web Storage

웹페이지에서 클라이언트 측에서 중요한 데이터를 저장하는 방법은 크게 Cookie와 Web Storage 두 가지 방식이 있습니다. 모두 문자열(String)으로만 값을 저장할 수 있습니다.

🍪 Cookie

Cookie는 정보를 HTML header를 통해 서버와 통신하고, 작은 데이터를 저장할 수 있습니다. Cookie는 주로 서버가 유저를 기억하기 위한 수단으로 사용됩니다.

예시

웹페이지에서 ID는 123이라고 Cookie를 저장해놓으면, 다음에 유저가 접속했을 때 서버가 ID에 해당하는 Cookie를 읽어 유저가 ID 123에 해당하는 유저라는 것을 확인하는 식입니다.

📦 웹 스토리지 / Web Storage

HTML5에서 표준으로 지정되었으며, Local Storage와 Session Storage로 나뉘어집니다. 쿠키에 비해서 큰 데이터를 저장할 수 있고, 오직 유저의 브라우저에 로컬하게 저장되며 서버로는 전송되지 않는다는 차이가 있습니다. 따라서 굳이 서버로 전송할 필요가 없는 데이터라면 보안과 속도를 위해 Web Storage에 저장하는 것이 좋습니다. 데이터가 모든 서버 요청에 포함되지 않으며, 요청될 때만 사용됩니다. 따라서 웹사이트의 성능에 영향을 주지 않고도 많은 양의 데이터를 저장할 수 있습니다. 오프라인에서 모든 유저의 데이터를 저장하기 위한 큰 저장 공간을 사용할 수 있기 때문에 웹 스토리지를 통해 오프라인 웹 어플리케이션을 구현할 수 있습니다. Web Storage의 데이터는 키(key)와 값(value)의 짝으로 저장되어 있고, 웹페이지는 저장된 그 자체로만 접근이 가능합니다.

로컬 스토리지(Local Storage)와 세션 스토리지(Session Storage)의 차이

Local Storage는 데이터에 유효기간이 없지만, Session Storage는 창을 닫으면 데이터가 초기화된다는 차이점이 있습니다.

브라우저 지원

Web Storage는 IE8이상, Chrome, Firefox, Opera, Safari 그리고 모바일 브라우저에서 지원하고 있습니다.

🤔 예제

쿠키 저장 및 불러오기

쿠키를 저장하고 불러오는 setCookie(~)함수와 getCookie(~)함수를 정의해봅니다.

// JavaScript에서 getCookie(), setCookie() 함수를 선언하여 쿠키를 저장하고 불러옵니다.
function setCookie(cname, cvalue, exdays) {
    var d = new Date();
    d.setTime(d.getTime() + (exdays*24*60*60*1000));
    var expires = "expires="+d.toUTCString();
    document.cookie = cname + "=" + cvalue + "; " + expires;
}

function getCookie(cname) {
    var name = cname + "=";
    var ca = document.cookie.split(';');
    for(var i=0; i<ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0)==' ') c = c.substring(1);
        if (c.indexOf(name) != -1) return c.substring(name.length,c.length);
    }
    return "";
}

해당 함수의 사용법은 다음과 같습니다.

// ABC라는 항목에 123이라는 값을 유효기간 7일로 저장  
setCookie('ABC',123,7)
// ABC라는 항목에 저장된 쿠키값 불러오기  
getCookie('ABC')

Web Storage 저장, 불러오기

Web Storage는 window.localStorage에 위치하기 때문에, 별도의 함수 선언 없이 localStorage.${항목이름}으로 저장, 불러오기가 가능합니다. data type으로 String, Boolean, Number, null, undefined 모두 저장 가능하지만, 문자열로 변환되어서 저장됩니다. 만약 객체를 통체로 저장하고 싶다면 JSON.stringif를 사용하고, 받을 때 JSON.parse를 사용하면 됩니다. Session Storage도 같은 방식입니다.

// CDE라는 항목에 345라는 값을 저장
localStorage.setItem(CDE, 345)
// CDE라는 항목에 저장된 값 불러오기
localStorage.getItem(CDE)
// CDE라는 항목 지우기
localStorage.removeItem(CDE)
// 전체 localStorage 삭제하기
localStorage.clear()

정리

	cookie	localStorage	sessionStorage
생성자	클라이언트나 서버. 서버는 Set-Cookie 헤더를 사용할 수 있습니다	클라이언트	클라이언트
만료	수동으로 설정	영구적	탭을 닫을 때
브라우저 세션 지속	만료 설정 여부에 따라 다름	O	X
HTTP 요청과 함께 서버로 보냄	쿠키는 Cookie 헤더를 통해 자동 전송됨	X	X
용량 (도메인당)	4kb	5MB	5MB
접근성	모든 윈도우	모든 윈도우	같은 탭