[기초] 쿠키와 세션의 차이

1. Cookie(쿠키)

◎ 쿠키는 클라이언트에 대한 정보를 이용자의 PC의 하드디스크에 보관하기 위해서 웹 사이트에서 클라이언트의 웹 브라우저에 전송하는 정보이다.

1-1. Cookie의 특징

• 웹 사이트에서 쿠키를 설정하면 이후 모든 웹 요청은 쿠키 정보를 포함하여 서버로 전송된다.

• 쿠키는 개수와 용량에 있어 제한을 걸어 두고 있다. 하나의 사이트에서 저장할 수 있는 최대 쿠키 수는 20개이며, 하나의 사이트에서 저장할 수 있는 최대 쿠키 크기는 4KB로 제한되어 있다.

• 쿠키는 만료일자를 지정하게 되어 있어 언젠간 제거된다. 만료일자로 지정된 날짜에 쿠키는 제거되는 것이다. (만료일자를 지정하지 않으면 세션 쿠키가 된다.)

1-2. Cookie의 장/단점

+ 장점 : 대부분의 브라우저에 지원이 다 된다.

- 단점 :  api가 한번 더 호출되므로 서버에 부담이 증가된다.

2. WEB STORAGE

◎ HTML5에는 웹 사이트의 데이터를 클라이언트에 저장할 수 있는 새로운 자료구조인 WebStorage 스펙이 포함되어있다.

Web Storage의 개념은 키/값 쌍으로 데이터를 저장하고 키를 기반으로 데이터를 조회하는 패턴이다.

그리고 영구저장소(LocalStorage)와 임시저장소(SessionStorage)를 따로 두어 데이터의 지속성을 구분할 수 있어 응용 환경에 맞는 선택이 가능하다.

쿠키와 거의 차이가 없어 보일지라도 몇 가지 쿠키의 단점을 극복하는 개선점이 도입되었다.

2-2. WebStorage의 특징

• 저장된 데이터가 클라이언트에 존재할 뿐 서버로 전송은 이루어지지 않는다. 이것은 네트워크 트래픽 비용을 줄여 준다는 주요한 장점이 된다.

• WebStorage는 용량의 제한이 없다.

• 만료기간의 설정이 없다. 즉 한번 저장한 데이터는 영구적으로 존재하는 것이다.

• 데이터의 지속성과 관련하여 두 가지 용도의 저장소를 제공한다. (LocalStorage, SessionStorage)

3. LocalStorage

◎ LocalStorage는 저장한 데이터를 지우지 않는 이상 영구적으로 보관이 가능하다. 도메인마다 별도로 로컬 스토리지가 생성이 된다는 것이다. Windows 전역 객체의 LocalStorage라는 컬렉션을 통해 저장/조회가 이루어진다.

3-1. LocalStorage의 특징

• 브라우저를 종료해도 데이터는 보관되어 다음번 접속에도 그 데이터를 사용할 수 있다.

3-2. LocalStorage의 장/단점

+ 장점 : 서버에 불필요한 데이터를 저장을 안 하고, 용량이 크다.

- 단점 : HTML4만 지원되는 브라우저에는 지원이 안된다.

3-3. LocalStorage 저장/조회/삭제하는 법

localStorage.setItem("access_token", "Jintae");// 저장localStorage.getItem("access_token");// 조회 : JintaelocalStorage.removeItem("access_token");// access_token 으로 설정된 키로 접근하여 삭제localStorage.clear();// 전체 삭제

4. SessionStorage

◎ SessionStorage는 세션 종료 시(브라우저를 닫을 경우) 클라이언트에 대한 정보가 삭제된다.

SessionStorage는 windows 전역 객체의 SessionStorage라는 컬렉션을 통해 저장/조회가 이루어진다.

4-1. SessionStorage의 특징

• 데이터가 지속으로 보관되지 않는다. 이는 마치 브라우저 기반 세션 쿠키와 그 성질이 비슷한데, 현재 페이지가 브라우징 되고 있는 브라우저 컨텍스트 내에서만 데이터가 유지된다.

4-2. SessionStorage의 장/단점

+ 장점 : LocalStorage와 같음. 단지 기능 차이

- 단점 : LocalStorage와 같음. 단지 기능 차이

4-3. SessionStorage 저장/조회/삭제하는 법

sessionStorage.setItem("access_token", "Jintae");// 저장
sessionStorage.getItem("access_token");// 조회 : Jintae
sessionStorage.removeItem("access_token")l// access_token 으로 설정된 키로 접근하여 삭제
sessionStorage.clear();// 전체 삭제

5. 어떤 상황에서 사용하는 좋을까?

- 팝업 창 : Cookie

- 자동 로그인 : LocalStorage

- 입력 폼 정보 :  SessionStorage

- 비로그인 장바구니 :  SessionStorage

6. 정리

• 저장위치
  • 쿠키: 클라이언트(브라우저)에 메모리 또는 파일에 저장
  • 세션: 서버 메모리에 저장
• 보안
  • 쿠키: 클라 로컬에 저장되기도, 특히 파일로 저장되는 경우 탈취, 변조의 위험 있음
  • 세션: 정보 자체는 서버에 저장되어 있어 비교적 안전
• 라이프 사이클
  • 지속쿠기의 경우 브라우저를 종료하여도 저장되있을 수 있음
  • 세션은 서버에서 만료시간/날짜를 정해서 지워버릴 수도 있고 / 세션 쿠키에 세션 아이디를 저장한 경우 브라우저 종료시 세션 아이디가 날아갈 수 있음
• 속도
  • 쿠키에 정보가 있기 때문에 서버 요청시 헤더를 바로 참조하면 되므로 속도에서 유리
  • 세션은 제공받을 세션 아이디(key)를 이용해 서버에 다시 데이터를 참조해야하므로 비교적 느림

세션말고 굳이 쿠키를 사용하는 이유

→ 세션은 세버에 데이터 저장 즉, 서버의 자원을 사용하기 때문에 서버 자원에 한계가 있고 속도 저하도 올 수 있음

상황에 따른 알맞은 활용

Cookie: 팝업 창, n일 동안 보지 않기, 비로그인 장바구니

Local Storage: 자동 로그인, 사용자 언어 선택, 글 임시 저장

Session Storage: 입력 폼 정보, 이전 페이지 저장, 이전 스크롤 위치 저장