옛날 옛적..XP를 사용하던 시절에 인터넷이 느려져 아빠를 부르면 아빠왈 "쿠키를 좀 지워야겠네"
쿠키는 먹는건데..쿠키를 왜지우는건데..
큼큼, 그 쿠키 말고 다른 쿠키를 알아봅시다.
Cookie
웹 통신을 할 때 내가 누군지 나타내지 않으면 서버 입장에서는 익명의 요청이기에 응답을 못한다.
이 때 내 정보를 쿠키에 담아서 전송을 하면 서버는 쿠키를 읽고 이게 내 요청인지 알게되고 응답을 내게 전달해준다.
쿠키는 이렇게 서버와 클라이언트간의 "지속적인" 데이터 교환을 위해 만들어진 놈이다.
Cookie is..
클라이언트 로컬에 저장되는 키와 값이 들어있는 작은 데이터 파일
사용자 인증이 유효한 시간을 볼 수 있으며, 유효시간이 남아있으면 브라우저가 종료되어도 인증이 유효하게 남아있다.
클라이언트는 최대 300개의 쿠키를 저장할 수 있으며 하나의 도메인 당 20개의 쿠키를 저장할 수 있다.
쿠키 1개는 최대 4KB까지 저장 가능하다
쿠키는 서버와의 통신을 위해 시도때도 없이 사용되기에, 사용자가 별도로 요청하지 않아도 브라우저가 Request 시 Request Header 를 넣어서 자동으로 전송한다.
구성 요소
(브라우저 개발자도구에서 application 탭을 누르면 볼 수 있다)
이름(Name)
각각의 쿠키를 구별하는데 사용된다
값(Value)
쿠키의 이름과 관련된 값
유효시간(Expires)
쿠키의 유효 시간
Domain
쿠키를 전송할 도메인
Path
쿠키를 전송할 요청 경로
동작 방식
이미지 출처 : https://interconnection.tistory.com/74
-
클라이언트가 페이지를 요청한다
-
서버에서 쿠키를 생성한다
-
HTTP 헤더에 쿠키를 포함시켜 응답한다
-
브라우저가 종료되어도 쿠키 만료 기간이 남았다면 클라이언트에서 보관하고 있는다
-
같은 요청을 또 할 경우 HTTP 헤더에 쿠키를 함께 보낸다
-
서버에서 쿠키를 읽어 상태 정보 변경이 필요한 경우 쿠키를 업데이트 하여 변경된 쿠키를 HTTP 헤더에 포함시켜 응답한다
용례
- 방문한 사이트에 로그인 시 "아이디를 기억하시겠어요?"를 클릭할 때 : 아이디를 쿠키로 저장한다
- 쇼핑몰의 장바구니 기능 : 장바구니에 넣은 품목을 쿠키로 저장한다
- 홈페이지 팝업 배너의 "오늘 하루 그만 보기" 클릭 : 이걸 클릭하면 안보는 사람으로 쿠키에 저장된다
단점
HTTP 환경은 stateless, connectionless 하기 때문에* 서버와 클라이언트 간의 지속적인 데이터 교환을 하기 위해선 쿠키를 계속 주고 받아야된다(건건이..!)
만약 4kb 용량 제한을 거의 다 채운 쿠키가 있다면, 요청을 할 때마다 기본 4kb의 데이터를 사용하게 된다. 4kb 중에는 분명 서버에 필요하지 않은 데이터들도 있기 때문에 불필요한 데이터 낭비를 초래할 수 있다.
💡 HTTP는 클라이언트가 요청을 한 후 응답을 받으면 연결을 끊어버리는 특징을 갖고 있다.
연결을 끊는 순간 클라이언트와 서버의 통신은 끝나게 되며 상태 정보 또한 지워진다.
💡Connectionless : 클라이언트가 요청을 한 후 응답을 받으면 그 연결을 끊어 버리는 특징을 말한다.
💡Stateless : 통신이 끝나면 상태를 유지하지 않는 특징.
연결을 끊는 순간 클라이언트와 서버의 통신이 끝나며 상태 정보는 유지하지 않는 특성이 있다.
Local Stroage & Session Storage
로컬 스토리지와 세션 스토리지는 HTML5 에 추가된 저장소로, key-value storage 형태를 갖고 있다.
또한 모두 window 객체 안에 들어있어 Storage객체를 상속받기 때문에 메소드를 사용할 수 있다.
도메인 별로 용량 제한도 있다! - 모바일은 2.5mb, 데스크탑은 5mb~10mb 정도
이게 부족하다면 50mb를 기본적으로 저장할 수 있는IndexedDB를 사용하게 된다.
Cookie의 대안으로 등장!
Web Storage은 시간제한과 갯수제한이 없다..! 그렇기에 cookie와 다르게 사용자가 WebStorage를 일일이 주의하여 관리해줘야한다.
WebStorage는 자바스크립트 객체이기에, 다른 자바스크립트 객체를 넣는것 역시 가능하다.
Cookie를 사용하여 통신하는 경우 requst와 response시에 모든 쿠키의 모든 내용을 다 넘겨야 했지만, WebStorage는 그냥 개발자가 선별해서 넘기면 되므로 http통신에도 부하를 줄일 수 있다.
쿠키는 domain별로 데이터가 분리되지만 같은 브라우저라면 값을 공유하지만, session storage는 다른 탭이라면 데이터가 공유되지 않는다.
만약 공유할 데이터는 localStorage에 넣으면 되므로 선택의 폭이 커졌다.
정리
1.제한
cookie - 용량제한, 시간제한, 갯수제한 존재
webstorage - 용량제한만 존재
2.시간제한 설정
cookie - 시간제한 설정가능
webstorage - 시간제한 설정 불가능
3.데이터형
cookie - 문자열만 저장가능
webstorage - javascript 객체 저장가능
4.데이터 전송
cookie - 모든 쿠키를 전송해야함, cookie를 가공함으로써 발생하는 side effect존재
webstorage - 개발자가 선택해서 전송할 수 있고 가공할 수도 있음
5.세션의 정의
cookie - 같은 브라우저면 다른 탭이나 다른 창(프로세스)일지라도 같은 세션이라고 정의
webstorage - 같은 브라우저일지라도 sessionStorage의 경우 다른 탭이면 다른 세션이라고 정의
6.이벤트
cookie - 이벤트 없음
webstroage - 이벤트 존재
Local Stroage vs Session Storage
로컬 스토리지와 세션 스토리지의 차이점은 데이터의 영구성 여부이다.
로컬 스토리지의 데이터는 사용자가 지우지 않는 이상 계속 브라우저에 남아 있다.
하지만 세션 스토리지의 데이터는 윈도우나 브라우저 탭을 닫을 경우 제거된다.
그렇기에 지속적으로 필요한 데이터(자동 로그인 등)는 로컬 스토리지에 저장하고, 잠깐 동안 필요한 정보(일회성 로그인 정보라든가)는 세션 스토리지에 저장하면 좋다.
정리
localStorage - 로컬에 도메인 별로 지속되는 storage
sessionStorage - 세션이(프로세스, 탭, 브라우저) 종료될 때까지 지속되는 storage
⚠️주의
비밀번호같은 중요한 정보는 절대 저장하지 마세요!
로컬 스토리지, 세션 스토리지 또한 클라이언트에 저장하는 것이기 때문에 언제든지 털릴 수 있다.
참고자료
