HTML 5 저장소(세션스토리지,로컬스토리지) 및 쿠키

  웹 개발을 하다보면 데이터베이스에는 저장하지 않지만, 사용자가 설정한 값을 어딘가에 저장해야할 경우가 생깁니다. (자동로그인, 아이디 저장 기능 사용 여부 등)

  

오늘 소개해드리려고 하는 내용은 쿠키 및 HTML5에서 제공하는 세션스토리지 및 로컬 스토리지에 대한 내용입니다.

1. 쿠키

1-1. 쿠키의 특징

           -  키 - 벨류 형태로 저장되며, 클라이언트에서 서버측으로 요청 시 마다 전달된다.

           -  4kb 의 용량 제한이 있다.

           - 같은 도메인간에는 쿠키값이 공유된다.

     

     1-2. 쿠키의 장점

            - 웹 요청 시 자동으로 쿠키가 전달된다.

     1-3. 쿠키의 단점

            - 웹 요청 시 마다 쿠키가 전달되므로, 불필요한 요청값이 포함 될 수 있다.

            - 클라이언트에서 쿠키 값 설정/조회 시 별도의 함수를 만들어 호출하여야 한다.

            - 서버측으로 전달되기 때문에 도난 가능성이 존재.

           Ex_ 쿠키값을 조회하는 예제 함수

function GetCookie(pStrKey) {
    var oCookies = document.cookie;
    var aStrCookies = oCookies.split("; ");
    for (var i = 0; i < aStrCookies.length; i++) {
        var sKeyValues = aStrCookies[i].split("=");
        if (sKeyValues[0] == pStrKey) {
            return unescape(sKeyValues[1]);
        }
    }
    return "";
}

2. 세션 스토리지 

       2-1. 세션 스토리지의 특징

           - 키 - 벨류 형태로 저장되며, 서버측으로 전달되지 않는다.

           - 기기마다 차이가 있으나, 보통 한사이트당 5MB정도 사용이 가능하다.

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

       2-2. 세션 스토리지의 장점

           - 쿠키보다 많은 정보를 저장 할 수 있다.

           - 서버측으로 전달되지 않으므로 도난 가능성이 쿠키에 비하여 상대적으로 적다.

           - 값 설정/조회 시 제공된 API를 이용하면 된다.

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

2. 로컬 스토리지 

       2-1. 로컬 스토리지의 특징

           - 키 - 벨류 형태로 저장되며, 서버측으로 전달되지 않는다.

           - 기기마다 차이가 있으나, 보통 한사이트당 5MB정도 사용이 가능하다.

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

       2-2. 로컬 스토리지의 장점

           - 쿠키보다 많은 정보를 저장 할 수 있다.

           - 서버측으로 전달되지 않으므로 도난 가능성이 쿠키에 비하여 상대적으로 적다.

           - 값 설정/조회 시 제공된 API를 이용하면 된다.

           - 사이트 재 방문 시에 이전에 저장되었던 정보를 이용 할 수 있으므로 활용도가 높다.

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

    

쿠키와 스토리지의 장단점을 비교해보면, 스토리지가 쿠키의 단점을 보완하여 추가된 기능임을 알 수 있습니다. 스토리지 기능은 HTML5를 지원하는 브라우져 및 기기에서만 이용 가능합니다. 쿠키와 스토리지 기능을 적절하게 사용하면 웹 개발을 훨씬 편리하게 할 수 있습니다.