Chrome의 개발자 도구 Application 화면

웹 브라우저에는 대표적인 데이터를 저장하는 방법으로 Local Storage, Session Storage, Cookie가 있다.

Local Storage

브라우저에 영구적으로 저장되는 공간, 브라우저가 종료 후에도 데이터가 유지된다.

• Origin 마다 Key, value의 형태로 데이터를 저장할 수 있다.
• 저장 용량은 대개 5 ~ 10 MB
• 문자열 뿐만 아니라 객체(JSON)형태도 저장 가능
• 자바 스크립트로 클라이언트가 다룬다.

Session Storage

브라우저 탭(세션) 단위로 저장되며, 탭이 종료되면 데이터가 삭제된다.

• Origin 마다 Key, value의 형태로 데이터를 저장할 수 있다.
• 다른 탭과 데이터가 공유되지 않으며 독립적이다.
• 저장 용량은 대개 5 ~ 10 MB
• 임시 저장소로 많이 사용된다.
• 자바 스크립트로 클라이언트가 다룬다.

Cookie

클라이언트가 서버 측에 자동으로 데이터를 전송하기 위한 저장 공간이다.

• 조건(도메인과 경로)이 맞다면 서버측에 자동으로 브라우저가 함께 Cookie 데이터를 실어 보낸다.
• 데이터 크기 제한이 제일 작고 약 4KB이다.
• Domain, Path, Expires, Max-Age, HttpOnly, Secure, SameSite 같은 옵션들이 있다.
• 자바 스크립트나, Response Message를 통해 추가 가능하다.

Domain : 쿠키가 전송되는 도메인이다.
Path : 쿠키가 전송될 URL 경로이다.
Max-Age : 쿠키 유효 기간이며 단위는 초다.(생략시 세션 쿠키가 되어 브라우저 종료시 자동 삭제된다.)
HttpOnly : 자바 스크립트로 쿠키를 조작하는 것을 차단하는 옵션. (XSS 공격에 유효)
Secure : HTTPS 연결에서만 쿠키를 사용하는 옵션.

SameSite : 크로스 사이트 요청시 쿠키 전송 정책.
- Strict : 동일 사이트 요청에만 쿠키 전송
- Lax : 안전한 HTTP method(Get등)에 대해 제한적 허용
- None: 모든 크로스 사이트 요청에 쿠키 전송(단. Secure 옵션이 필수)

그외

Extension Storage : 크롬의 경우 익스텐션이 사용하는 저장소이다.