Local vs Session vs Cookies?? 너희 뭐가달라?? 뭔데??

1. 소개

• 일반적으로 Browser에 데이터를 저장할 수 있는 3개의 공간이 있다.
• 간단한 애플리케이션을 만들때에도 데이터를 저장할 일이 있는데, 중요하지 않거나 유실되도 무방한 데이터이면 서버 단에 저장하는 것이 낭비일 수 있다.
• 그래서, 서버 단이 아닌 브라우저 상에 데이터를 저장할 수 있는 기술인 웹스토리지가 밑에 있다.
• Local Sotrage, Session Storage, Cookies가 있다.

2. 특징

2-1) Storage

• 쿠키의 단점을 보완했다.
• Key, value로 이루어진 데이터 파일
• 서버의 자원이 사용하므로 서버의 공간이 필요하다.
• 기기마다 차이는 있으나 모바일 2.5MB, 데스크탑 5MB~ 10MB정도 저장 가능하다.
• 쿠키 보다 보안이 우수하며 많은 정보를 담을수 있다.
• Local / Session으로 나뉘며 데이터의 만료에 따라 나뉜다. (사용자가 데이터를 삭제하지 않는 한)
• Local storage = 만료기한 없음, Session storage = 세션 종료 시 만료.

2-2) Cookies

• 클라이언트 로컬(하드)에 저장되는 key, value값이 들어 있는 데이터 파일
• 서버에 저장되는 거이 아니기 때문에 보안과 상관없는 정보들에 사용한다.
• 재 요청시 저장된 값을 참조, 재사용한다.
• 사용자의 하드에 저장되기 때문에 공공장소에서 해킹 등의 악용이 가능
• 클라이언트에 300개, 하나의 도메인에 20개의 값만 저장이 되며 하나의 쿠키는 4KB까지 저장 가능
• 이름, 값, 만료 날짜(저장 기간), 경로 정보가 있어야 하며 일정시간 동안 데이터를 저장할 수 있다.
• 같은 도메인 상에서 쿠키의 값은 공유 된다.
• 클라이언트가 요청하지 않아도 브라우저 요청이 있을 경우 Request Header에 넣어서 자동으로 서버에 전송한다.

2-2-1) 웹 사이트에서의 쿠키

• 필수적인 쿠키 : 페이지 탐색, 웹사이트 보안 영역 접속, 기본 기능 활성화
• 기능 쿠키 : 접속자의 지역, 언어 등
• 성능 쿠키 : 정보의 익명 수집, 보고
• 마케팅 쿠키 : 방문 내역 추적

2-2-2) Cookie API사용 방법

• 사용 사례 :
  1) 오늘 팝업을 열지 않음
  2) 장바구니
  3) 자동 로그인

Cookie 쿠키 읽기, 쓰기,  삭제

/**
 * 쿠키 읽기
 * @param name 키
 * @returns
 */
function readCookie(name) {
    var nameEQ = name + "=";
    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,c.length);
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
    }
    return null;
}

/**
 * 쿠키 쓰기
 * @param name  키
 * @param value 값
 * @param days 날짜
 */
function writeCookie(name,value,days) {
    var expires = "";
    if (days) {
        var date = new Date();
        date.setTime(date.getTime() + (days*24*60*60*1000));
        expires = "; expires=" + date.toUTCString();
    }
    document.cookie = name + "=" + value + expires + "; path=/";
}

/**
 * 쿠키 삭제
 * @param name
 */
function deleteCookie(name) {
    createCookie(name,"",-1);
}

출처

2-3) 로컬 스토리지(Local Storage)

• 데이터의 만료기간이 없으며 사용자가 데이터를 지우지 않는 한 영구 보존 된다.
• 사이트 재 방문 시 이전에 저장되었던 정보를 이용 할 수 있어 활용도가 높다.
• 사용자 설정 저장, 브라우저를 닫고 열었음에도 정보가 남아야 하는 것들을 저장할 때 사용 된다.

2-3-1) 로컬 스토리지 API사용 방법

window.localStorage.setItem('key','value');
window.localStorage.getItem('key');
window.localStorage.removeItem('key');
window.localStorage.clear(); // All clear

2-4) 세션 스토리지(Session Storage)

• 데이터의 세션이 끝나면(브라우저 종료) 데이터가 지워진다.
• 휘발성 데이터를 저장할 때 사용 된다.

2-4-1) 세션 스토리지 API사용 방법

window.sessionStorage.setItem('key', 'value);
window.sessionStorage.getItem('key');
window.sessionStorage.removeItem('key');
window.sessionStorage.clear(); // All clear