세션, 쿠키, 세션스토리지, 로컬스토리지

세션과 쿠키는 HTTP 프로토콜 기반이기 때문에 이를 이해하기 위해서는 http의 특성에 대해 이해하는 것이 좋다.

 

■HTTP => 비연결성    비상태성

서버의 자원을 절약하기 위해 HTTP는 연결 상태를 유지하지 않고 연결 해제 후에도 상태 정보를 저장하지 않음.

 

 1. 비연결성

클라이언트가 서버에 요청했을 때 Response를 보낸 후 연결을 끊는 처리방식

 

2. 비상태성

클라이언트와 첫번째 통신에서 주고받은 데이터를 이후 통신에서 유지하지 않는다.

 

그러나 브라우저를 사용하다보면 자동 로그인과 같은 기능을 이용할 수 있는데(또는 이용해야 하는데) 바로 쿠키와 세션을 활용한 것이다.

 

	쿠키	세션
저장 위치	클라이언트(PC)	웹서버
저장 형식	String	Object
만료 시점	쿠키 저장시 설정함(브라우저 꺼져도 삭제되지 않음)	브라우저 종료시 삭제(기간 지정 가능)
용량 제한	최대 300개, 도메인당 20개, 쿠키 하나당 4KB	제한 없음
속도	세션보다 빠름	쿠키보다 느림
보안	세션보다 안좋음	쿠키보다 좋음
예시	팝업 "오늘 다시 보지 않기", 방문했던 사이트 아이디,비번 자동 저장	로그인 상태 유지

 

Question) 세션을 두고 굳이 쿠키를 쓰는 이유?

=> 세션은 서버 리소스를 사용하기 때문에 사용자가 많아지면 소요가 커진다, 속도 느림. 지워져도 되고 사용자 편의를 위한 정보들은 쿠키를 사용하는 것이 좋다.

 

Question) 캐시와의 차이점?

=> 캐시는 이미지나 css, js파일 등을 브라우저나 서버 앞 단에 저장해놓고 사용하는 것이다. 캐시에 저장되면 브라우저는 이것을 참고하기 때문에 서버에서 변경이 되어도 적용이 안되는 경우가 있는데 이때 캐시를 지워주면 된다.

 

 

■세션의 동작 방식

1. 클라이언트가 서버에 접속 시 세션 ID 발급

2. 클라이언트는 세션 ID에 대해 쿠키를 사용하여 저장하고 가지고 있음

3. 클라이언트는 서버에 요청할 때 쿠키의 세션 ID를 서버에 전달해서 사용

4. 서버는 세션 ID를 전달 받아서 별다른 작업 없이 세션 ID로 세션에 있는 클라이언트 정보를 가져옴

5. 클라이언트 정보를 가지고 서버 요청을 처리하여 클라이언트에게 응답

 

■쿠키의 동작 방식

1. 클라이언트가 페이지를 요청

2. 서버에서 쿠키를 생성

3. HTTP 헤더에 쿠키를 포함 시켜 응답

4. 브라우저가 종료되어도 쿠키 만료 기간이 있다면 클라이언트에서 보관

5. 같은 요청을 할 경우 HTTP 헤더에 쿠키를 함께 보냄

6. 서버에서 쿠키를 읽어 이전 상태 정보를 변경 할 필요가 있을 때 쿠키를 업데이트 하여 변경된 쿠키를 HTTP 헤더에 포함시켜 응답

 

세션도 결국 쿠키를 사용하기 때문에 동작 원리가 비슷하지만 가장 큰 차이점은 사용자의 정보가 저장되는 위치이다. 때문에 쿠키는 서버와 통신은 하지만 서버의 자원(메모리)는 절대 사용하지 않고 세션은 사용한다.

 

서버는 요청 자체만으로 응답을 보낼 수 없기 때문에 쿠키에 나에 대한 정보를 담아 서버에서 누군지 파악할 수 있음. 서버로 계속 정보가 전달됨.

브라우저마다 저장되는 쿠키가 다르기 때문에 크롬에서 저장된 쿠키를 파이어폭스에서 사용할 수 없다.

 

개발자 모드에서 볼 수 있는 쿠키

위 그림에서 보이듯 쿠키는 서버로 데이터가 전송된다.

이러한 단점을 보완하기 위해 HTML5부터 웹 스토리지가 등장한다.

1. 웹 스토리지는 key와 value 형태로 이루어진다.

2. 웹 스토리지는 로컬에만 정보를 저장한다.

3. 쿠키와 달리 서버에 전송되지 않는다.

4. 모바일 2.5MB, 데스크탑 5~10MB

 

■로컬스토리지

사용자가 지우지 않는 이상 계속 남아있는 데이터, 데이터의 영구성을 보장한다.(자동 로그인)

window.localStorage에 위치

localStorage.setItem('name', 'junwoo');
localStorage.setItem('age', 100);

localStorage.getItem('name');	// junwoo
localStorage.getItem('age');	// 100 (문자열)

localStorage.removeItem('age');
localStorage.getItem('age');	//null
localStorage.clear();	//전체 삭제

localStorage.setItem('person', { name: 'junwoo'});
localStorage.getItem('person');	//[object Object]

 

■세션스토리지

1회성 데이터, 브라우저를 종료하면 데이터가 삭제된다.(비회원 장바구니)

window.sessionStorage에 위치

메소드 사용법은 로컬스토리지와 동일하다.

 

쿠키로 웹 스토리지를 모두 대체할 수는 있지만 쿠키 사이즈는 최대 4kb로 작으며 보안이 취약하고 사용자의 동의를 얻어야 하는 번거로움이 있다.