2021-10-04 브라우저 저장소와 쿠키

1. 브라우저 저장소 (Web storage)

- 브라우저 내에 키-값 쌍을 저장하게 해준다. (키 기반으로 데이터 조회)

- localStorage와 sessionStorage가 있다.

- 해당 도메인과 관련된 데이터를 서버가 아닌 클라이언트 웹브라우저에 저장하게 해준다.

- 사이트의 도메인 단위로 접근이 제한된다. 따라서 서로 다른 도메인끼리 데이터를 공유할 수 없다.

- HTML5부터 제공되었다.

 

(1) 로컬 스토리지 (localStorage)

- 데이터를 영구적으로 보관할 수 있다. (브라우저 종료해도 데이터 지속)

- 페이지 프로토콜 별로 분리해 자료 저장한다 → 동일 페이지여도 HTTP에서 접속하였을 때랑 HTTPS로 저장되었을 때 데이터 다르게 저장된다.

- 도메인만 같으면 전역적으로 데이터를 공유할 수 있다.

- window.localStorage라는 전역 객체를 통해 접근 가능하다.

 

(2) 세션 스토리지 (sessionStorage)

- 데이터가 지속적으로 보관되지 않는다. (reload해도 유지되지만 브라우저 종료되면 데이터도 사라진다.)

- 동일 사이트 동일 도메인일지라도 브라우저 컨텍스트가 다르면 공유되지 않는다. (탭 브라우징이나 다른 브라우저를 실행해도 두 sessionStorage는 별개의 영역이다.)

- window.sessionStorage를 통해 사용 가능하다.

 

→ 즉 로컬 스토리지와 세션 스토리지는 데이터 유지와 데이터 범위 측면에서 차이를 지닌다.

 

 

2. 쿠키 (Cookie)

- 서버는 request 만으로 요청을 보낸 사람을 알 수 없다. 따라서 매번 서버에 요청을 보낼 때마다 사용자의 정보가 담긴 쿠키를 포함하여 서버로 전송한다. (매 HTTP 요청마다 암호화 없이 전송되기 때문에 도청 위험이 있다.)

- 문자열만 저장할 수 있다.

- 개수와 용량에 제한이 있다. (한 사이트에서 저장가능한 쿠키는 최대 20개, 4KB → 하위키를 활용하면 어느 정도 극복 가능하다)

- 영구적인 데이터 저장이 불가능하다. (쿠키는 만료일자를 지정해줘야 한다.)

- 인증 정보 외 언어 설정 등 다양한 정보를 저장하는 데 활용할 수 있다.

 

 

3. Web Storage vs Cookie

	브라우저 저장소	쿠키
서버 전송	X	O
객체 저장	문자열 외 객체도 저장 가능 (단 브라우저 지원 여부 따져야함)	문자열만 저장 가능
용량 제한	X	개수와 용량 제한 있음
만료 일자	X	O