쿠키(Cookie) vs. 로컬스토리지(Local Storage)

웹페이지에서 데이터를 저장하는 방법은 쿠키와 웹스토리지 두가지방식이 있습니다.

쿠키는 서버가 유저를 기억하기위한 수단으로, 전통적으로 사용되었습니다.

예를들어 웹페이지에서 ID:123 이라는 쿠키를 저장해놓으면, 다음에 유저가 접속했을 때에 서버가 ID쿠키를 읽어들여 유저가 123이라는 것을 확인하는 식이죠.

반면, 웹스토리지는 HTML5에서 표준으로 지정되었으며,local storage와 session storage 두종류가 있습니다.

쿠키에 비해서 큰 데이터를 저장할 수 있고, 서버로는 전송이 되지 않는 차이점이 있습니다.

Local storage는 데이터에 유효기한이 없고, session storage는 창을 닫으면 데이터가 초기화되는 점만 제외하면 완전히 같습니다.

쿠키는 HTML header에서 서버와 통신을 하지만, 웹스토리지는 그렇지 않기 때문에 속도적 측면에서 약간 더 우위를 갖고 있습니다.

(쿠키 데이터가 워낙 작아서 체감할만한 성능향상은 기대하기 어렵지만..)

따라서 굳이 서버로 전송할 필요 없는 데이터는 웹스토리지에 저장하는 것이 좋다고 할 수 있습니다.

웹스토리지는 IE8이상, 크롬, 파이어폭스, 오페라, 사파리에서 지원하고있고, 모바일브라우저에서도 모두 지원하고 있습니다.

쿠키 저장, 불러오는 방법

쿠키를 저장하고, 불러오려면 자바스크립트에서 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")

로컬스토리지 저장, 불러오는 방법

로컬스토리지는 별도의 함수선언 없이 localStorage.항목이름 으로 저장, 불러오기가 모두 가능합니다.

예) cde라는 항목에 345라는 값을 저장

localStorage.cde = "345"

예) cde라는 항목에 저장된 값 불러오기

localStorage.cde

※세션 스토리지 역시 localStorage 대신 sessionStorage로 바꿔서 사용하기만 하면 됩니다.