LocalStorage, SessionStorage, Cookie

 cookie 

- cookie는 웹사이트에 의해 유저의 컴퓨터에 놓여지는 작은 텍스트 파일이다.

- 최대 4KB의 용량을 가진 매우 작은 양의 데이터이다.

- 사이트에서 방문한 페이지를 저장하거나 유저의 로그인 정보를 저장하는 등 다양한 방법으로 사용된다.

(유저의 신원확인으로 페이지에서 재인증을 거치지 않는다.)

- HTTP 요청과 함께 서버로 보낸다.

- 문자열만 저장할 수 있다는 제한이 있다.

Seesion cookies - 만료일을 포함하지 않는다. but, 브라우저나 탭이 열려있는 동안에만 저장된다.(은행 웹사이트)

Persistent cookies - 만료일을 포함한다.만료일까지 유저의 디스크에 저장되고 만료일이 지나면 삭제된다.

 

 

↓

 

 

HTML5에는 데이터를 클라이언트에 저장할 수 있는 WebStorage 스펙이 포함된다.

 

- WebStorage는 cookie의 단점을 보완해서 만들었다.

- WebStorage는 key, value의 형태로 데이터로 저장하고 key를기반으로 데이터를 조회하는 패턴이다.

- 영구저장소 LocalStorage, 임시저장소 SessionStorage 를 따로 두어 데이터의 지속성(데이터 만료)을 구분하여 환경에 맞는 선택이 가능하다.

 

 

↓

 LocalStorage 

-  cookie와의 가장 중요한 차이점 중 하나는 모든 HTTP요청에서 데이터를 주고받지 않고, 클라이언트와 서버간의 전체 트래픽과 낭비되는 대역폭의 양을 줄일 수 있다. (인터넷이 끊어져도 데이터가 삭제되거나 지워지지 않기 때문)

- 최대 5MB의 정보를 저장할 수 있다.

- Persistent cookies처럼 동작한다. javascript 코드를 통해 삭제하지 않으면 데이터는 자동으로 삭제되지 않는다.(영구적)

- 문자열뿐만 아니라 javascript의 primitives와 object도 저장할 수 있다.

 

- 인터넷연결이 잘 유지되지 않는 지역에서 사용하기 유리하다.

- 재무정보와 같은 취약한 데이터는 제대로 저장하거나 보호할 수 없다.

 

 SessionStorage 

- LocalStorage와 다르게 세션이 종료되면 (웹 브라우저를 닫는 경우) 클라이언트에 대한 정보를 삭제한다.

(=> 보안이 필요한 데이터일수록 SessionStorage를 사용하는게 좋다.)