브라우저 저장소 (WebStorage : Local, Session / Cookie)

▶️ 브라우저 저장소의 종류

1. Web Storage

  a. Local Storage

  b. Session Storage

2. Cookie 

 

▶️ Cookie 란?

Cookie는 HTTP 쿠키, 웹 쿠키, 브라우저 쿠키라고도 불린다.

쿠키는 서버가 사용자의 웹 브라우저에 전송하는 작은 데이터 조각입니다. 브라우저는 이 데이터 조각을 저장해 놓았다가 동일한 서버에 재 요청 시 이 정보를 함께 전송합니다.

쿠키가 클라이언트 측에 정보를 저장할 수 있는 유일한 방법이었을 때는 클라이언트 측에 정보를 저장하기 위해 쿠키가 주로 사용되었지만, 모든 요청 마다 쿠키가 함께 전송되기 때문에 성능 저하의 원인이 될 수 있어 지금은 클라이언트 측에 데이터를 저장하기 위해서 로컬 스토리지나 세션 스토리지를 사용하는 것이 좋다.

▶️ 사용 목적 : 쿠키는 상태가 없는(stateless) HTTP 프로토콜에서 상태 정보를 기억하기 위해 사용된다. 상태가 없는(무 상태) 프로토콜은 이전 요청과 상관없이 각각의 요청을 독립적인 트랜잭션으로 취급하기 때문에 이전 요청의 상태를 저장하지 않는다. 쿠키를 사용하면 이전 요청의 상태를 저장할 수 있기 때문에 쿠키는 크게 아래와 같은 3가지 목적으로 사용이 된다.
- 세션 관리(Session Management): 서버에 저장해야 할 로그인, 장바구니 등의 정보 관리
- 개인화(Personalization): 사용자 선호, 테마 등의 정보 관리
- 트레킹(Tracking): 사용자 행동을 기록하고 분석하기 위한 정보 관리

 

▶️ 특징

- 사용하는 user를 기억하기 위해서 만들어짐 ex) Authorization(인증)
- HTML은 stateless로써 항상 기억하지 못하므로 cookies를 사용해서 기억해야하는 정보를 갖는다
    ex) 만약 language를 '한국어'로 선택하면 cookies는 기억했다가 문서를 한국어로 보여준다
- 만료기한이 있으며 서버와 지속적으로 통신된다. (영구쿠키를 원한다면 만료일자를 멀게 설정)
- 대부분의 브라우저에 지원이 된다는 장점은 있지만, 매 HTTP 요청마다 포함되어 api 호출로 서버에 부담을 줄 수 있고,

- 쿠키용량은 약 4KB정도로 작고 제한적

- 암호화가 되지 않아 정보 도난 위험이 발생

- 매번 서버로 전송되고, 문자열만 저장이 가능하며, 저장 용량이 제한이 되어있고, 만료일자가 존재한다.

- 서버에서 쿠키를 전송할 때 만료일, 지속 시간, 도메인, 경로 속성 등을 추가해서 전송할 수 있다.

▶️ Web Storage 란?

쿠키 단점을 보완하여 HTML5에 '추가'(쿠키를 완전 배제 하지 않은채로) 된 저장소로, 해당 도메인과 관련된 특정 데이터를 서버가 아니라 클라이언트 웹브라우저에 저장하는 기능이다.

 

- 문자열 이외에도 key/value 쌍으로 데이터를 저장하고, 키를 기반으로 데이터를 조회하는 패턴이다.

- windows의 객체 안에 들어있다.

- 데이터의 지속성으로 영구저장소(Local Storage)와 임시저장소(Session Storage)로 구분할 수 있다.

- 사이트 도메인 단위로 접근이 제한됨

- 저장 용량에 제한이 없다

 

1. Local Storage 란?

- window.localStorage에 위치
- string, boolean, number, null, undefined 모두 저장 가능 하지만, 문자열로 변환된다
- object 생성자 형으로 저장되어 한번에 통째로 저장하려면 JSON.stringify() 해야하고, 받을 때는 JSON.parse() 해야한다.
- 최대 5MB의 정보를 저장 할 수 있으며 지우기 전까지 영구적으로 저장되어있다
ex) 자동 로그인 저장

2. Session Storage 란?

- window.sessionStorage에 위치
- HTTP session id를 식별자로 구별해 데이터를 사용자의 브라우저에 쿠키형태가 아닌 접속한 서버 DB에 정보를 저장한다
- 메모리에 저장하기 때문에 브라우저가 종료 되면 삭제된다.
ex) 입력 폼 정보 저장, 비로그인 장바구니

 

▶️ Cookies와 Session의 차이 

	Cookie	Session
저장 위치	Client의 Web browser가 지정하는 메모리 or 하드디스크에 저장	서버의 메모리에 저장
만료 시점	저장 시, expires 속성을 정의해서 무효화 시키면 삭제될 날짜 지정 가능	Client가 로그아웃 하거나, 설정시간 동안 반응 없으면 무효화 되므로 정확한 시점 알 수 없음
리소스	Client에 저장 Client 메모리를 사용하므로 서버 자원 사용하지 않는다.	서버에 저장 서버 메모리로 로딩되므로 세션이 생길 때마다 리소스를 차지
용량 제한	Client도 모르게 접속 되는사이트에 의해서 설정 될 수 있으므로 쿠키로 인해 문제가 발생하는 것을 막고자 한 도메인 당 20개, 하나의 쿠키당 4KB로 제한해 둔다	Client가 접속하면 서버에 의해서 생성되므로 갯수, 용량 제한 없다.