cookie, localStorage, sessionStorage

HTTP는 무상태(Stateless) 프로토콜

클라이언트의 상태 정보를 기억시켜주기 위해 사용한다.

 

동일한 서버에 재 요청 시 저장된 데이터를 함께 전송한다. 쿠키는 두 요청이 동일한 브라우저에서 들어왔는지 아닌지를 판단할 때 주로 사용합니다. 이를 이용하면 사용자의 로그인 상태를 유지할 수 있습니다. 

 

쿠키 주 목적 세 가지:

1. 세션 관리(Session management):

서버에 저장해야 할 로그인, 장바구니, 게임 스코어 등의 정보 관리

2. 개인화(Personalization):

사용자 선호, 테마 등의 세팅

3. 트래킹(Tracking):

사용자 행동을 기록하고 분석하는 용도

 

	cookie	localStorage	sessionStorage
생성자	클라이언트 또는 서버 (클 <-> 서버: 서로 쿠키 전달가능) 서버는 Set-Cookie 헤더를 사용해 클라이언트로 쿠키를 보낼 수 있음	클라이언트 로컬 환경에 데이터 저장 (서버에서 관여하지 않음)	클라이언트 로컬 환경에 데이터 저장 (서버에서 관여하지 않음)
만료	수동으로 설정 (expire, enddate ...)	영구적 도메인 단위로 구분되며 활용. 브라우저 자체를 종료해도 존재. (지우지 않는다면..)	세션 단위로 구분되며 활용. 브라우저, 탭을 닫을 때 삭제.
브라우저 세션 지속 여부	만료 설정 여부에 따라 다름	O	X
HTTP 요청 시 서버 전송 여부	O  쿠키는 Cookie 헤더를 통해 자동 전송됨	X	X
용량 (도메인당)	4kb	~5MB	~5MB
유효 Scope	모든 윈도우	모든 윈도우	같은 탭
접근 방법	document.cookie	window.localStroage	window.sesseionStorage

 

 

키 값은 문자열 이여야한다.

만약 객체를 저장한다면 객체를 바로 저장할 수 없으므로

- set시 stringify

- get시 parse

 

// localStroage 접근
const myData = [{...}, {...}, {...}]; // 어떤 데이터들의 집합
localStorage.setItem('savedStorage', JSON.stringify(myData));

// localStorage 가져오기
const getData = localStorage.getItem('savedStorage'); 
JSON.parse(getData); // stringify 해줬으니 사용할 땐 다시 parsing해줘야 함.