Web Storage
HTML5부터 제공하는 기능, 데이터를 클라이언트 웹 브라우저에 저장할 수 있도록 제공하는 기능
키(key), 값(value)으로 데이터를 저장하고 키(key)를 기반으로 데이터를 조회하는 패턴
Web Storage 특징
많은 정보를 안전하게 저장할 수 있다. 최소 5MB 이상의 공간을 가지고 있고, 서버로 전송되지 않는다.
단순 문자열을 넘어 (스크립트) 객체 정보를 저장할 수 있다.
만료 기간의 설정이 없어서 영구적으로 데이터 저장이 가능하다.
하나의 사이트에서 저장할 수 있는 용량이 제한되어 있지 않다.
Web Storage 장점
구조화된 객체를 저장할 수 있어서 개발 편의성을 제공해준다.
쿠키처럼 HTTP 요청 때마다 서버에 전달되지 않기 때문에 자원 낭비가 적다.
Web Storage 단점
브라우저와 디바이스 등의 환경을 많이 고려해야 한다.
Web Storage 종류
LocalStorage
보관 기한이 없는 데이터를 저장할 수 있는 객체
브라우저 탭이나 창이 닫히거나, 컴퓨터를 재부팅해도 저장된 데이터는 없어지지 않는다.
도메인마다 별도의 LocalStorage가 생성되고 같은 도메인에서 전역적으로 공유가 가능하다
windows 전역 객체의 LocalStorage라는 컬렉션을 통해서 저장과 조회가 이루어 진다.
SessionStorage
하나의 세션만을 위한 데이터를 저장하는 객체
사용자가 브라우저 탭이나 창을 닫으면 객체에 저장된 데이터는 사라진다.
같은 도메인이더라도 브라우저가 다르면 서로 다른 영역이 된다. (브라우저 컨텍스트가 다르기 때문에)
windows 전역 객체의 SessionStorage라는 컬렉션을 통해서 저장과 조회가 이루어 진다.
데이터의 지속성과 액세스 범위에 특수한 제한이 존재한다.
브라우저가 종료되면 데이터도 같이 지워지는 것(데이터의 지속성)
도메인이 같아도 브라우저가 다르면 서로 다른 영역이 되는 것(액세스 범위)
Cookie 란?
클라이언트(브라우저) 로컬에 저장되는 키(key)와 값(value)가 들어있는 데이터 파일
서버와 클라이언트 간의 지속적인 데이터 공유(교환)를 위해 만들어졌다.
사이트에서 방문한 페이지를 저장하거나 클라이언트에 유저의 정보를 저장하는 등 다양한 방법으로 사용된다.
HTTP 프로토콜은Connectionless하고Stateless한 프로토콜이다.
Connectionless: 클라이언트가 서버에 요청을 하고 서버가 클라이언트에 응답을 보내면 접속을 끊는다.
Stateless: 통신이 끝나면 상태 정보를 유지하지 않는다.
🧑💻 서버가 클라이언트를 식별할 수 있는 방법이 필요했다.
Cookie 특징
사용자 인증이 유효한 시간을 명시할 수 있으며, 유효 시간이 정해지면 브라우저가 종료되어도 인증이 유지된다는 특징이 있다.
쿠키는 사용자가 따로 요청하지 않아도 브라우저가 요청할 때 Header에 넣어서 자동으로 서버에 전송한다.
문자열만 저장할 수 있다.
서버는 요청 자체만으로 누구에게서 오는지 알 수 없다.
때문에 쿠키를 통해서 누구인지 파악하고 해당 요청에 대한 응답을 보내줄 수 있다.
Cookie 장점
대부분의 브라우저가 지원을 한다.
Cookie 단점
4KB 데이터 저장 제한으로 사이즈가 매우 작다.
매 HTTP 요청마다 서버에 전송하므로 데이터 전달 낭비가 발생한다.
요청을 암호화 없이 전달되기 때문에 보안에 취약하다. (쿠키의 정보가 그대로 보이게 된다. id, pw 등)
하위키를 이용하면 사이즈 단점을 일부 해소할 수 있다.
Cookie 종류
세션 쿠키 (Session Cookie)
활성 웹 브라우저 세션이 있는 기간 동안 저장된다.
쿠키에 만료일이 포함되어 있지 않다.
디스크에 저장되지 않고 메모리에 저장되어 브라우저나 탭이 닫히면 영구적으로 삭제된다.
지속적 쿠키 (Persistent Cookie)
만료일이 포함된 경우에는 지속적 쿠키로 간주한다.
디스크에 저장되어 수동으로 삭제하기 전까지 만료 기한까지 데이터가 저장된다.
만일 영구 쿠키를 원한다면 만료일자를 굉장히 멀게 설정하여 해결할 수 있다.
보안 쿠키 (Secure Cookie)
HTTPS에서만 사용한다. 쿠키 정보가 암호화되어 전송된다.
서드파티 쿠키 (Third-Party Cookie)
방문한 도메인과 다른 도메인의 쿠키, 광고 배너 등을 관리할 때 유입 경로를 추적하기 위해서 사용된다.
Cookie 동작 방식
- 클라이언트가 서버에 페이지 요청
- 서버에서 쿠키를 생성
HTTP헤더에 쿠키를 포함시켜 클라이언트에게 응답- 브라우저가 종료되어도 쿠키 만료 기간이 있다면 클라이언트에서 보관 (쿠키 디렉터리)
- 같은 요청(클라이언트가 동일한 서버에
HTTP요청)을 할 경우HTTP헤더에 쿠키를 함께 전송 - 서버에서 쿠키를 읽어 이전 상태 정보를 변경할 필요가 있을 때 쿠키를 업데이트하여 변경된 쿠키를 HTTP 헤더에 포함시켜 응답
Cookie 사용 예시
- 방문 사이트에 로그인 시 '아이디 비밀번호 저장 하시겠습니까?'
- 쇼핑몰 장바구니
- 자동로그인, 팝업에서 '오늘 더 이상 이 창을 보지 않음' 체크
LocalStorage와 Cookie의 차이점
-
서버 전송의 유무
LocalStorage는 서버에 전송되지 않는다.
Cookie는HTTP요청을 할 때마다 서버에 전송된다. -
객체 저장
LocalStorage는 구조화된 객체를 저장할 수 있다.
Cookie는 키, 값 형태로 들어있지만 문자열만 저장할 수 있다. -
용량 제한
LocalStorage는 하나의 사이트에 용량 제한이 없다.
Cookie는 최대 쿠키 수는 20개, 최대 데이터는 4KB로 제한이 있다. -
만료 일자
LocalStorage는 만료 일자가 따로 없어서 영구적으로 저장된다.
Cookie는 만료일자를 정하게 되어 있어서 언젠가는 사라진다.
